[英]Combine blur and click event
I try to implement the following code 我尝试实现以下代码
$("#email").blur(function(){
var email = $("#email").val();
$.ajax({
type: "POST",
url: "email_check.php",
data: "email="+email,
cache: false,
success: function(msg) {
$("#emailcheck").ajaxComplete(function() {
if (msg == "OK") {
$(this).fadeIn("slow").html('email available');
}
});
}
});
$("#register").click(function(){
$("#emailcheck").hide();
});
<div class="clear" id="emailline">email:<input type="text" name="email" id="email" style="border:1px solid #928b8b;"></div>
<div id="emailcheck"></div>
<input type="button" class="form_button" id="register" value="register!">
The problem is when I click the 'register' button, the word "email available" disappears, but it appears again. 问题是,当我单击“注册”按钮时,“可用电子邮件”一词消失了,但是又出现了。 I want it to disappear forever.
我希望它永远消失。 Can anyone tell me what's wrong with my code, any help will be greatly appreciated!
谁能告诉我我的代码有什么问题,任何帮助将不胜感激!
The problem looks like it could be resting with a race condition between the blur
function firing, as well as the click
function firing order. 该问题看起来可能与
blur
函数触发以及click
函数触发顺序之间的竞争条件有关。
Think about this: if your #email
element is in focus, nothing's happening, everything's great. 考虑一下:如果您的
#email
元素是重点,那么什么也没有发生,那么一切就很好。 When you click on the #register
button, two things will happen: first, the blur
function will fire, as well as the click
function, hiding the #emailcheck
element. 当您单击
#register
按钮时,将发生两件事:首先, blur
函数将启动,而click
函数将隐藏#emailcheck
元素。
The AJAX call will almost likely complete AFTER the click
function has hidden the #emailcheck
element, thus showing it again after it's been hidden...make sense? 在
click
函数隐藏了#emailcheck
元素之后,AJAX调用几乎有可能完成,从而在隐藏它之后再次显示它...有意义吗?
What you need to do is find a way to disable that blur
event listening when the click
function is called. 您需要做的是找到一种在
click
函数时禁用该blur
事件侦听的方法。 I would be tempted to try either unbinding the event: 我很想尝试解除事件绑定:
$("#register").click(function(){
$("#email").unbind("blur");
$("#emailcheck").hide();
});
...or use a boolean flag to attempt to check to see if the blur event should be fired: ...或使用布尔值标志尝试检查是否应触发模糊事件:
var run_blur = true;
$("#email").blur(function(){
if (run_blur){
...
}
}
$("#register").click(function(){
run_blur = false;
$("#emailcheck").hide();
});
This assumes execution order would be favourable, but I hope this helps! 假设执行顺序是有利的,但是我希望这会有所帮助! Let me know if you're still struggling!
如果您还在挣扎,请告诉我! :)
:)
EDIT: 编辑:
Here's an example on jsfiddle for the boolean flag version of what I'm talking about: jsfiddle boolean example . 这是jsfiddle上我所谈论的布尔标志版本的示例 : jsfiddle boolean example 。
Use, 采用,
success: function(msg) {
$("#emailcheck").ajaxComplete(function() {
if (msg == "OK") {
$(this).fadeIn("slow").html('email available');
hideDiv();
}
});
function hideDiv(){
$("#register").click(function(){
$("#emailcheck").html('');
$("#emailcheck").hide();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.