結合模糊和點擊事件

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

AJAX調用幾乎可能會在click函數隱藏#emailcheck元素後完成，因此在隱藏後再次顯示它......有意義嗎？

您需要做的是找到一種方法來禁用調用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(); 
     }); 
}