jquery neues Element Ereignisbindungsproblem Lösung

jquery neues Element Ereignisbindungsproblem Lösung_jquery

WBOY

Freigeben： 2016-05-16 16:44:44

Original

1210 Leute haben es durchsucht

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.

Code kopieren Der Code lautet wie folgt:

 
< tbody> 
 
Diese Zeile hatte ursprünglich  ; 
 ;/button> 
 >Normalerweise würde ich so binden

Code kopieren

Der Code lautet wie folgt:

jQuery (function($){ //Es ist bereits eine Löschschaltfläche initialisiert, um das Löschereignis zu binden $(".del").click(function() { $(this).parents( "tr").remove(); });

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!

Code kopieren
Der Code lautet wie folgt:

Delete

jQuery(function($){ //Zeile hinzufügen$("#add2").click( function( ){ $("#table2>tbody").append('Neue Zeile

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. 

Code kopieren

Der Code lautet wie folgt:

jQuery(function($){

//Definieren Sie die Ereignisbindung der Löschschaltfläche//Schreiben Sie sie hinein, um eine Kontamination zu verhindern der globale Namespacefunction deltr(){ $(this).parents("tr").remove(); //Es ist bereits eine Löschschaltfläche zum Binden initialisiert Ereignis löschen$( "#table3 .del").click(deltr); //Zeile hinzufügen

$("#add3").click(function(){

$(' ')
// 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

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

Kopieren Sie den Code
Der Code lautet wie folgt: .template{display:none;}
Hier ist die Vorlage (function($){
//Schaltflächenereignisbindung der fünften Tabelle löschen
$("#table5 .del").click(function() {
$(this) .parents("tr ").remove();
});
//Schaltflächenereignisbindung der fünften Tabelle hinzufügen
$("#add5").click(function(){
$("# table5>tbody>tr:eq(0)")
//Zusammen mit dem Ereignis kopieren
.clone(true)
//Vorlagen-Tag entfernen
.removeClass( "template")
//Interne Elemente ändern
.find("td:eq(0)")
.text("Neue Zeile")
.end()
/ /Tabelle einfügen
.appendTo($("#table5>tbody"))
});
Allgemeine Kommentare:

Die oben genannten 4 Optionen haben ihre eigenen Vor- und Nachteile.
Plan Nr. 0, es gibt keine Trennung zwischen Struktur und Verhalten und verschmutzt den globalen Namensraum. Am wenigsten empfohlen. Deshalb betrachte ich es nicht einmal als einen Plan. Aber für JS-Anfänger kann es für Notfallprojekte verwendet werden.
Option 1, recht zufriedenstellend, nichts Gutes oder Schlechtes
Option 2, diese Methode nutzt die Vorteile von js Event Bubbling voll aus. Und das effizienteste. Da diese Lösung jedoch den leistungsstarken Selektor von jQuery ignoriert, wird es gleichzeitig problematischer, wenn zu viele Elementattributanforderungen erforderlich sind. Sie werden zwischen den richtigen und falschen Beziehungen vieler Umstände hin- und herwandern. Später fiel mir ein, dass ich $(event.target).is(selector) in jQuery als Bedingung verwenden konnte. Dies kann die Entwicklungseffizienz erheblich verbessern, die Ausführungseffizienz jedoch geringfügig verringern.
Plan Nr. 3, das ist meiner Meinung nach der Plan, der die Idee der Trennung von Struktur und Verhalten am besten verkörpert. Aber auch die Mängel liegen auf der Hand. Die Abhängigkeit von jQuery ist zu groß. Ansonsten muss man eine Funktion schreiben, die die Ereignisse zusammen kopiert, was für Anfänger aber offensichtlich äußerst schwierig ist. Aus Sicht zukünftiger Trends ist diese Lösung jedoch weiterhin sehr zu empfehlen.

Es gibt keine eindeutige Zahl, für welchen Plan man sich entscheiden soll. Es hängt von Ihrem Projekt und Ihrer Beherrschung von js und der Idee der Trennung von Struktur und Verhalten ab. Das Passendste ist das Beste.

Zusätzlich:

Verwandeln Sie Plan 3 in einen perfekten Struktur-Verhalten-Trennungsstil.
Zuallererst ist das mit der Vorlage das Vorlagenelement. Es ist die Quelle aller Kopien, um ein versehentliches Löschen zu verhindern. Dieses Schablonenelement ist auch optional, wenn das Licht nicht entfernt werden soll. Weil Sie jedes vorhandene Element für die Schleife kopieren können.
Fügen Sie zweitens eine Wiederholung zu jedem wiederholten Element hinzu, damit die Schaltfläche „Löschen“ das Auffinden dieser Elementebene erleichtert. Dies ist optional und manchmal nicht erforderlich.
Fügen Sie abschließend jedem zu ändernden Element eine Klasse hinzu, damit es mit find leicht gefunden werden kann. Ich habe hier zum Beispiel eine Inhaltsklasse und die neu hinzugefügte kann den darin enthaltenen Wert ändern.
Dies vervollständigt den perfekten Fall der Trennung von Struktur und Verhalten.
Code kopieren Der Code lautet wie folgt:

> tr>
Diese Zeile hatte ursprünglich ">Löschen

>Diese Zeile hatte ursprünglich ;/li>
Diese Zeile hatte ursprünglich "del">Delete ;/script>