結合模糊和點擊事件

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