结合模糊和点击事件

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元素。

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

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

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

...或使用布尔值标志尝试检查是否应触发模糊事件：

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