Nach jQuery Ajax laden oder aktualisieren, verliere ich das mouseover Ereignis

Question

Nach der Verwendung von .load mein div zu aktualisieren, das ist ein Element zu meiner Liste hinzufügen, habe ich Firebug verwendet und sah, dass die Liste aktualisiert wurde. Allerdings verlor ich das Mouseover-Ereignis, das funktionierte, wenn die Seite zum ersten Mal geladen .... in meinem Skript js ich habe:

// hide and show are css classes that display none and block respectively 

function openList(){ 
    $("#miniList").removeClass().addClass("show"); 
} 
function closeList(){ 
    $("#miniList").removeClass().addClass("hide"); 
} 
... 
$(document).ready(function() { 
    $("#miniList").mouseover(function() { 
     openList(); 
    }) 
    $("#miniList").mouseout(function() { 
     closeList(); 
    }) 
}); 

---

function addItemToDiv(id, ref, num) { 
    $("#miniList").load("/list/ajax_updateList.jsp", { 
     'action' : 'additem', 
     'pid' : id, 
     'pref' : ref, 
     'qty' : num 
    }); 
} 

... Natürlich ist dies funktioniert der erste Zeit, zu der die Seite geladen wird, aber wenn ich ein Element zur Liste hinzufüge, wird DOM aktualisiert, aber MouseOver-Effekte funktionieren nicht mehr.

Alle Gedanken sind mehr als willkommen. Vielen Dank im Voraus.

Answer 1

Für DOM-Elemente, die dynamisch hinzugefügt werden, müssen Sie die Funktion jquery .live() verwenden.

Bitte über untenstehenden Link gehen, denke ich, dass Ihr Problem beheben könnte:

api.jquery.com/live

@ishwebdev, dieses gemeinsame Problem ist, wir laufen, für alle DOM elments nach Pageload wie Laufzeit hinzugefügt, wir brauchen, um die Ereignisse durch Live statt regelmäßigen bind

Wenn Sie mit jquery 1.4 Verwendung unter Code zu binden:

// von jquery.com

$('give your selector here').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    // do something on mouseover 
    } else { 
    // do something on mouseout 
    } 
}); 

Answer 2

@siri: danke für die ausgezeichnete Antwort, es hat für mich sofort funktioniert. Hier ist mein Warenkorb Drop-Down-Beispiel:

Vorher:

$("#cart-items").mouseenter(function(){ 
    $('#cart-pulldown').show(); 
}); 

Nach:

$("#cart-items").live('mouseenter', function(){ 
    $('#cart-pulldown').show(); 
}); 

Mit .live das Event-Handling noch funktioniert, auch nachdem ich die zugrunde liegende HTML über einen Ajax-Aufruf ändern.

Answer 3

Die ausgewählte Antwort funktioniert nicht mehr für jquery 1.9+.

Verwenden Sie stattdessen „auf“ Ereignis, wie

$(document).on("keyup", "input.assets",function(event) {... 

http://api.jquery.com/on/