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

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
});

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

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

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!

JavaScript jquery Static for using Delegate Event this input issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn