Die Ereignisüberwachung von js unterscheidet sich von der von CSS. Solange der CSS-Stil festgelegt ist, hat er die gleiche Leistung, unabhängig davon, ob er vorhanden ist oder neu hinzugefügt wurde. Das Abhören von Ereignissen ist jedoch nicht der Fall. Sie müssen Ereignisse einzeln an jedes Element binden.
Ein häufiges Beispiel ist die Verarbeitung von Tabellen. Am Ende jeder Zeile befindet sich eine Schaltfläche zum Löschen. Klicken Sie hier, um diese Zeile zu löschen.
Alles funktioniert perfekt für die Löschtaste, die es vor domready gab. Wenn Sie jedoch js verwenden, um nach domready dynamisch einige Zeilen hinzuzufügen, verlieren die Schaltflächen in den neu hinzugefügten Zeilen jegliche Wirkung.
Wie kann dieses Problem gelöst werden? Nachfolgend finden Sie 4 Lösungen:
Lösung Nr. 0 – Onclick-Methode
Wenn Sie das Prinzip der Trennung von Struktur und Verhalten ignorieren, werde ich normalerweise Folgendes tun.
Beachten Sie, dass die Deltr-Funktion zu diesem Zeitpunkt eine globale Funktion sein muss und außerhalb von jQuery platziert werden muss (Funktion($) {}). Wenn sie innerhalb von jQuery platziert wird, wird sie zu einer lokalen Funktion und onclick in HTML kann nicht aufgerufen werden!
') }); //Die Funktion zum Löschen von Zeilen muss außerhalb der domready-Funktion platziert werden
function deltr(delbtn){
$(delbtn).parents("tr").remove();
Lösung Nr. 1 – Bindung wiederholen Formel
besteht darin, Ereignishandler an vorhandene Elemente zu binden, wenn domready vorhanden ist, und sie dann erneut zu binden, wenn neu hinzugefügte Elemente hinzugefügt werden.
') // Hier löschen Die Schaltfläche ist wieder an das Ereignis gebunden. .find(".del").click(deltr).end() .appendTo($("#table3>tbody")); >}); });
Lösung Nr. 2 – Event-Bubbling-Methode
Unter Verwendung des Prinzips des Event-Bubblings geben wir den Vorfahren Element dieser Schaltfläche. Event-Handler-Funktion binden. Verwenden Sie dann das Objekt event.target, um festzustellen, ob dieses Ereignis durch das gesuchte Objekt ausgelöst wurde. Normalerweise können Sie zur Beurteilung einige DOM-Attribute wie event.target.className, event.target.tagName usw. verwenden.
Code kopieren
Der Code lautet wie folgt:
Delete
jQuery(function($){ //Vierter Das Löschen Schaltflächenereignisbindung einer Tabelle $("#table4").click(function(e) { if (e.target.className=="del"){ $(e. target) .parents("tr").remove(); }; //Button-Ereignisbindung der vierten Tabelle hinzufügen $("#add4") .click(function (){ $("#table4>tbody").append('
Neue Zeile hinzufügen
') });
Nr. 3 Lösung – Ereignismethode kopieren
Man kann sagen, dass die oben genannten Lösungen relativ einfach zu implementieren sind, auch wenn Sie die jQuery-Bibliothek nicht verwenden. Diese Lösung basiert jedoch stärker auf jQuery. Und es muss jQuery Version 1.2 oder höher erfordern. Niedrigere Versionen von jQuery erfordern Plug-Ins. Beide beiden oben genannten Lösungen haben viel über die Löschfunktion nachgedacht und eine Vielzahl von Auslöse- und Bindungsmethoden geändert. Diese Lösung ist anders. Sie kann wie die üblichen rein statischen Elemente sofort gebunden werden. Aber wenn wir eine neue Zeile hinzufügen, ändern wir sie. Wir möchten keine neue Zeile mehr hinzufügen, indem wir die Zeichenfolgen wie oben zusammenfügen. Dieses Mal versuchen wir, DOM-Elemente zu kopieren. Und beim Kopieren kopieren Sie es zusammen mit den gebundenen Ereignissen. Verwenden Sie nach dem Kopieren find oder ähnliches, um die internen Elemente zu ändern. Wenn Sie, genau wie in diesem Beispiel, alle Elemente löschen, ist die Vorlage erforderlich. Wenn Sie sie nicht löschen, müssen Sie möglicherweise keine Vorlage verwenden. Um ein versehentliches Löschen zu verhindern, habe ich die Vorlage hier ausgeblendet. Ich habe den eindeutigen Klon (true) in jQuery verwendet
