Noobie Jquery Question - I found a bug in my script, not sure how to fix it

Question

Thanks for your help on my last noobie jquery question and since you done good, I have another for you :) The script below allows me to perform some simple AJAX by retrieving some static markup from another HTML file and insert it into my homepage. I'm experiencing a bug that I think is related to the magic of asynchronicity, but since I'm new to AJAX, I'm not sure.

When I move my mouse over a link, it retrieves the HTML and inserts it into my homepage. When I move my mouse off the link, it should remove the new HTML that was inserted. The bug presents itself when sometimes the HTML is inserted, but not removed when you move the mouse on/off the link very quickly. My theory is the "mouse off" function is called before the HTML is actually inserted, do you agree? If so, any thoughts on how to fix this? Here's the script...

$(function()
{
    //HOVER EFFECT FOR CONTACT LINK
    $('a#contact_link').hover(function() 
    {        
        $('<div id="contact_container" />').load('contact.htm #contact', function() 
        {
            $(this).stop()
                .hide()
                .insertAfter('#header')
                .slideDown(250);    
        });      
    }, 
    //MOUSE OFF EFFECT FOR CONTACT LINK
    function()
    {
        $('#contact_container').remove();       
    });    
});

Thanks so much in advance for all your help!

EDIT* Thanks to your replies, I changed my script and the bug seems to be fixed...

$(function()
{
    //RETRIEVE THE MARKUP AT PAGE LOAD
    $('<div id="contact_container" />').load('contact.htm #contact', function() 
    {
        $(this).hide()
            .insertAfter('#header');
    });

    //HOVER EFFECT FOR CONTACT LINK, SHOW THE MARKUP
    $('a#contact_link').hover(function() 
    {        
        $('#contact_container').stop()
            .slideDown(250);             
    }, 
    //MOUSE OFF EFFECT FOR CONTACT LINK, HIDE THE MARKUP
    function()
    {
        $('#contact_container').stop()
            .hide();        
    });    
});

I can still see potential for a few bugs in this script, but i'll save that for another question ;) thanks everyone!

Answer 1

Why don't you fill the content only one time and hide the div when mouse is out. When again hover is invoked if the div is present in the DOM just change the visibility of the div.

Each time loading the div with an Ajax response won't be a good idea if the resulting response is the same.

if ($("#contact_container").length > 0){
    // the element exits in the DOM
}

Answer 2

That sounds correct.

A possible way around this would be to set a flag when the ajax call is successful to indicate that content has been inserted. Then, in the hover out function, check that the flag has been set, and if it has, call the remove command. You could set an interval to check the flag until it has been set.

Or another way -

Perform the load in document ready, hide the content, then display and hide on hover over and out, respectively.

By the way, your selector will be inserting a new <div> element with id contact_container, is that what you want?

Answer 3

I thought someone already replied in your previous question that your DIV selector is wrong. Did you try fixing it?

Answer 4

Why don't you use mouseleave?

        $("a#contact_link").mouseleave(function(event){
            $("a#contact_link").hide("slow");
        });