Dynamisch erstellte HTML-Elemente stellen oft eine Herausforderung bei der Ereignisverarbeitung dar. Stellen Sie sich ein Szenario vor, in dem Elementen mit der Klasse .myclass über jQuery ein Event-Handler angehängt ist:
$(function(){ $(".myclass").click( function() { // do something }); });
Dies funktioniert gut für vorhandene Elemente, aber dynamisch erstellte Elemente erben den Event-Handler nicht. Wenn beispielsweise später ein neuer Link mit der Klasse .myclass hinzugefügt wird:
$(function(){ $("#anchor1").click( function() { $("#anchor1").append('<a>
Dem neu erstellten Link „test4“ ist der Click-Event-Handler nicht angehängt. Um dieses Problem zu beheben, bietet jQuery eine Lösung mit der Methode „.on()“:
$('body').on('click', 'a.myclass', function() { // do something });
Diese Methode hängt den Ereignishandler an ein übergeordnetes Element (wie in diesem Fall „body“) und zielt auf übereinstimmende Elemente ab ein Selektor ('.myclass'). Daher wird an alle gegenwärtigen und zukünftigen Elemente mit der Klasse .myclass in „body“ der Event-Handler angehängt.
Dieser Ansatz ermöglicht eine flexible Handhabung von Ereignissen sowohl für statische als auch für dynamisch erstellte Elemente und gewährleistet unabhängig davon nahtlose Benutzerinteraktionen wann die Elemente zur Seite hinzugefügt werden.
Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery Ereignisse auf dynamisch erstellten HTML-Elementen verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!