jQuery-Migration: Warum funktioniert „on()' nicht mit dynamisch hinzugefügten Dropdowns?

jQuery: Upgrade von live() auf on() für dynamisch hinzugefügte Dropdowns

jQuery 1.7 führte als Ersatz die Methode on() ein für live(). Während die Syntax und die beabsichtigte Funktionalität von on() unkompliziert erscheinen, können Benutzer beim Versuch, für dynamisch hinzugefügte Elemente von live() nach on() zu migrieren, auf Probleme stoßen.

Problem:

Wenn on() zum Lauschen auf change()-Ereignisse in dynamisch hinzugefügten Dropdown-Menüs verwendet wird, schlägt der Ereignishandler fehl Feuer.

Ursache:

Im Gegensatz zu live(), das Event-Handler an alle übereinstimmenden Elemente im Dokument angehängt hat, bindet on() Handler nur an vorhandene Elemente. Dies liegt daran, dass on()-Ereignishandler auf die aktuell ausgewählten Elemente beschränkt sind, was bedeutet, dass neu hinzugefügte Elemente das Ereignis nicht auslösen können, es sei denn, der Handler ist an ein Element höherer Ebene gebunden.

Lösung:

Um das Verhalten von live() zu replizieren, binden Sie den Event-Handler an ein übergeordnetes Element, das die dynamisch hinzugefügten Dropdowns kapselt. Dadurch wird sichergestellt, dass alle neu hinzugefügten Elemente innerhalb dieses Bereichs den Ereignishandler auslösen können.

Code:

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Alternativ empfiehlt sich die Bindung den Event-Handler so nah wie möglich an den Zielelementen platzieren. Dies ist jedoch möglicherweise nicht immer in allen Szenarien machbar.

Hinweis:

Es ist wichtig zu beachten, dass in der on()-Dokumentation ausdrücklich angegeben ist, dass nur Event-Handler vorhanden sind an aktuell ausgewählte Elemente gebunden und muss zum Zeitpunkt der Bindung auf der Seite vorhanden sein.

Das obige ist der detaillierte Inhalt vonjQuery-Migration: Warum funktioniert „on()' nicht mit dynamisch hinzugefügten Dropdowns?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!