Объедините размытие и нажмите событие

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, таким образом, показывая его снова после того, как он был скрыт ...

Что вам нужно сделать, так это найти способ отключить прослушивание события blur при вызове функции click. Я хотел бы попробовать либо открепить событие:

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

Предполагается, что порядок выполнения будет благоприятным, но я надеюсь, что это поможет! Дайте мне знать, если вы все еще боретесь! :)

EDIT:

Вот пример jsfiddle для булевой версии того, о чем я говорю: jsfiddle логический пример .

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