Combine blur and click event

Question

I try to implement the following code

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

The problem is when I click the 'register' button, the word "email available" disappears, but it appears again. I want it to disappear forever. Can anyone tell me what's wrong with my code, any help will be greatly appreciated!

Answer 1

The problem looks like it could be resting with a race condition between the blur function firing, as well as the click function firing order.

Think about this: if your #email element is in focus, nothing's happening, everything's great. When you click on the #register button, two things will happen: first, the blur function will fire, as well as the click function, hiding the #emailcheck element.

The AJAX call will almost likely complete AFTER the click function has hidden the #emailcheck element, thus showing it again after it's been hidden...make sense?

What you need to do is find a way to disable that blur event listening when the click function is called. I would be tempted to try either unbinding the event:

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

...or use a boolean flag to attempt to check to see if the blur event should be fired:

var run_blur = true;

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

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

This assumes execution order would be favourable, but I hope this helps! Let me know if you're still struggling! :)

EDIT:

Here's an example on jsfiddle for the boolean flag version of what I'm talking about: jsfiddle boolean example .

Answer 2

Use,

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