jQuery funktioniert nicht mit Elementen nach Dokument Last erstellt

Question

Ich habe zwei Elemente dinamically mit jQuery:

Bild und eine Schaltfläche Schließen

ich den Code schrieb sowohl in doument.ready Funktion zu entfernen:

Aber es funktioniert nicht, und ich denke, das liegt daran, dass der Code nicht in den Code nach dem Laden des Dokuments suchen sucht.

Wie kann ich dieses Problem lösen?

Answer 1

Sie müssen delegierte Ereignisse über on() verwenden, wenn Sie Ereignisse dynamisch hinzugefügt Elemente behandelt werden möchten:

$(document).on("click", ".deletepreview",function() { 
    var code = $(this).data("prevcode"); 
    $('#'+code).remove(); 
    $(this).remove(); 
}); 

ich dein Beispiel leicht modifiziert: immer Variablen deklarieren mit var in Verschlüssen, außer wenn Sie benötigen.

Answer 2

Für dynamisch erstellte Elemente Versuchen Sie es mit Delegation mit on wie:

Eventhandler werden nur die aktuell ausgewählte Elemente gebunden ist; Sie müssen auf der Seite zu dem Zeitpunkt vorhanden sein, zu dem der Code den Aufruf von .on() aufruft. Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie das Ereignis in einem Dokument-Ready-Handler für Elemente ein, die sich im HTML-Markup auf der Seite befinden. Wenn neuer HTML-Code in die Seite eingefügt wird, wählen Sie die Elemente aus und hängen Sie Ereignishandler an, nachdem der neue HTML-Code auf der Seite platziert wurde. Oder verwenden Sie delegierte Ereignisse zum Anhängen eines Ereignishandlers, wie im Folgenden beschrieben.

Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von Nachkommenelementen verarbeiten können, die dem Dokument zu einem späteren Zeitpunkt hinzugefügt werden. Durch die Auswahl eines Elements, das zum Zeitpunkt des Delegierens des delegierten Ereignishandlers garantiert vorhanden ist, können Sie mithilfe von delegierten Ereignissen vermeiden, dass Ereignishandler häufig angehängt und entfernt werden müssen. Dieses -Element könnte beispielsweise das Containerelement einer Ansicht in einem Model-View-Controller-Design sein oder ein Dokument, wenn der Ereignishandler alle blasenbildenden Ereignisse im Dokument überwachen möchte. Das Dokumentelement ist im Kopf des Dokuments verfügbar, bevor anderen HTML-Code geladen wird, so dass Ereignisse ohne dort angehängt werden können, bis das Dokument fertig ist.

Code:

$('body').on('click', '.deletepreview', function() { 
    var code = $(this).data('prevcode'); 
    $('#'+code).remove(); 
    $(this).remove(); 
});