Question

我尝试实现以下代码

$("#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!">

问题是当我点击“注册”按钮时，“可用电子邮件”这个词消失了，但它又出现了。我希望它永远消失。谁能告诉我我的代码有什么问题，我们将非常感谢任何帮助！

Answer 1

问题看起来可能是在blur函数触发和click函数触发顺序之间的竞争条件下休息。

想一想：如果你的#email元素是焦点，没有任何事情发生，一切都很好。当您点击#register按钮时，会发生以下两件事：首先，blur函数将会触发，click函数会隐藏#emailcheck元素。< / p>

在click函数隐藏#emailcheck元素之后，AJAX调用几乎可能完成，因此在隐藏后再次显示它......有意义吗？

您需要做的是找到一种方法来在调用blur函数时禁用click事件侦听。我很想尝试解开事件：

$("#register").click(function(){
    $("#email").unbind("blur");
    $("#emailcheck").hide();
});

...或者使用布尔标志来尝试检查是否应该触发blur事件：

var run_blur = true;

$("#email").blur(function(){
    if (run_blur){
        ...
    }
}

$("#register").click(function(){
    run_blur = false;
    $("#emailcheck").hide();
});

这假设执行顺序是有利的，但我希望这有帮助！如果你还在努力，请告诉我！：）

修改

这是关于jsfiddle的一个例子，我正在谈论的布尔标志版本：jsfiddle boolean example。

Answer 2

使用，

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(); 
        }); 
}

结合模糊和点击事件

2 个答案: