Wie kann ich Ereignisse aus dynamisch generierten Elementen in JavaScript verarbeiten?-js-Tutorial-php.cn

Wie kann ich Ereignisse aus dynamisch generierten Elementen in JavaScript verarbeiten?

Mary-Kate Olsen

Freigeben： 2024-12-12 20:58:10

Original

660 Leute haben es durchsucht

How Can I Handle Events from Dynamically Generated Elements in JavaScript?

Umgang mit Ereignissen aus dynamisch generierten Elementen

Im Bereich der Webentwicklung kann der Umgang mit Ereignissen aus dynamisch generierten Elementen eine Herausforderung darstellen. Dieser Artikel befasst sich mit dem Problem der Erfassung von Ereignissen, die durch Elemente ausgelöst werden, die nach dem ersten Laden der Seite erstellt wurden.

Das Problem

Stellen Sie sich ein Szenario vor, in dem Sie ein

Element mit der ID „modal“, das mithilfe der Methode „load()“ von jQuery dynamisch in die Seite geladen wird. Dieses Modal enthält Eingabeelemente, die Sie auf Benutzereingaben überwachen möchten. Wenn Sie jedoch versuchen, die Eingabewerte mithilfe der Keyup-Methode zu erfassen, tritt ein Problem auf: Das Ereignis wird für die dynamisch generierten Elemente nicht mehr ausgelöst.

Die Lösung

Der Schlüssel zur Lösung dieses Problems liegt in der Delegation von Ereignissen. Bei der Ereignisdelegation werden Ereignishandler an ein statisches Vorgängerelement des dynamisch generierten Inhalts gebunden. Dadurch können Ereignisse bis zum statischen Vorfahren sprudeln, wo sie auch für Elemente verarbeitet werden können, die nach dem ersten Laden der Seite erstellt wurden.

jQuery bietet zwei Methoden für die Ereignisdelegation: .on() und .delegate( ). Für Versionen 1.7 und höher ist die empfohlene Methode .on():

$('#modal').on('keyup', 'input', function() {
    // Handle the event
});

Nach dem Login kopieren

Für Versionen 1.6 und niedriger verwenden Sie .delegate():

$('#modal').delegate('input', 'keyup', function() {
    // Handle the event
});

Nach dem Login kopieren

In diesen Beispielen ist die Der Ereignishandler ist an das modale Element gebunden. Wenn auf ein beliebiges Eingabeelement innerhalb des Modals geklickt wird, wird der Ereignishandler ausgelöst, da das Ereignis zum Modal sprudelt.

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignisse aus dynamisch generierten Elementen in JavaScript verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!