Wie migriere ich jQuerys „live()' korrekt zu „on()' für dynamisch hinzugefügte Elemente?

Übergang von live() zu on() in jQuery: Ereignisbindung debuggen

Die live()-Methode von jQuery war in Version 1.7 veraltet, was einen Wechsel zu on( ). Während das Ersetzen von live() durch on() im Idealfall zu ähnlichen Ergebnissen führen sollte, betont die on()-Dokumentation, dass Event-Handler nur an aktuell ausgewählte Elemente binden, die zum Zeitpunkt der Bindung auf der Seite vorhanden sind.

Original Implementierung (live()):

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

Ersatz (on()):

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

Die Diskrepanz mit live() ergibt sich aus der Tatsache, dass on() nur an aktuell vorhandene Elemente bindet, im Gegensatz zum Delegationsmechanismus von live(), der das Ereignis angehängt hat Handler für Elemente, die dynamisch zum DOM hinzugefügt werden.

Korrekte Verwendung von on() für dynamische Elemente:

Zu pflegen Bei der Ereignisbehandlung für dynamisch hinzugefügte Elemente mit on() muss der Ereignishandler an ein übergeordnetes Element gebunden sein, das zum Zeitpunkt der Bindung auf der Seite vorhanden ist. Dies kann erreicht werden durch:

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

Alternativ kann die Ereignisdelegation näher in der Elementhierarchie angewendet werden, um die Spezifität zu verbessern.

jQuery-Dokumentationshinweis:

In der live()-Dokumentation wird ausdrücklich darauf hingewiesen, dass das Umschreiben von live() im Hinblick auf seine Nachfolger das Binden von Event-Handlern an bestehende beinhaltet Elemente:

$(document).on(events, selector, data, handler);  // jQuery 1.7+

Das obige ist der detaillierte Inhalt vonWie migriere ich jQuerys „live()' korrekt zu „on()' für dynamisch hinzugefügte Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!