Noobie Jquery Frage - Ich habe einen Fehler in meinem Skript gefunden, nicht sicher, wie ich ihn beheben kann

Question

Vielen Dank für Ihre Hilfe auf my last noobie jquery question und da Sie gut gemacht haben, habe ich eine andere für Sie :) Das folgende Skript ermöglicht mir, einige einfache AJAX durchzuführen indem Sie ein statisches Markup aus einer anderen HTML-Datei abrufen und in meine Homepage einfügen. Ich habe einen Fehler, von dem ich denke, dass er mit der Magie der Asynchronität zusammenhängt, aber da ich neu bei AJAX bin, bin ich mir nicht sicher.

Wenn ich meine Maus über einen Link bewege, ruft sie den HTML-Code ab und fügt ihn in meine Homepage ein. Wenn ich die Maus von der Verknüpfung entferne, sollte sie den neuen HTML-Code entfernen, der eingefügt wurde. Der Fehler tritt auf, wenn der HTML-Code manchmal eingefügt, aber nicht entfernt wird, wenn Sie die Maus sehr schnell über die Verknüpfung bewegen. Meine Theorie ist die "Maus aus" Funktion wird aufgerufen, bevor der HTML-Code tatsächlich eingefügt wird, stimmst du zu? Wenn ja, irgendwelche Gedanken darüber, wie das zu beheben ist? Hier ist das Skript ...

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

Vielen Dank im Voraus für Ihre Hilfe!

EDIT * Dank Ihrer Antworten, änderte ich mein Skript und der Fehler scheint fixiert zu werden ...

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

ich noch Potenzial für ein paar Bugs in diesem Skript sehen, aber ich Ich spare das für eine andere Frage;) Danke an alle!

Answer 1

Warum füllen Sie den Inhalt nicht nur einmal und verstecken Sie das Div, wenn die Maus aus ist. Wenn der Hover erneut aufgerufen wird, wenn das div im DOM vorhanden ist, ändern Sie einfach die Sichtbarkeit des div.

Jedes Mal, wenn das div mit einer Ajax-Antwort geladen wird, ist es keine gute Idee, ob die resultierende Antwort die gleiche ist.

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

Answer 2

Das klingt korrekt.

Ein möglicher Weg um dies zu tun wäre, ein Flag zu setzen, wenn der Ajax-Aufruf erfolgreich ist, um anzuzeigen, dass Inhalt eingefügt wurde. Überprüfen Sie dann in der Hover-Out-Funktion, ob das Flag gesetzt wurde, und rufen Sie dann den remove-Befehl auf. Sie können ein Intervall festlegen, um das Flag zu prüfen, bis es gesetzt wurde.

Oder eine andere Art und Weise -

die Last in dem Dokument bereit Perform, verstecken den Inhalt, die dann ein- und ausblenden auf schweben über und aus, respectively.

Übrigens, Ihr Selektor wird ein neues <div> Element mit der ID contact_container einfügen, ist das was Sie wollen?

Answer 3

Ich dachte, jemand antwortete bereits in your previous question, dass Ihr DIV Selektor falsch ist. Hast du versucht es zu reparieren?

Answer 4

Warum verwenden Sie nicht mouseleave?

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