Wie hänge ich Event-Handler mit jQuery an dynamisch hinzugefügte Elemente an?

So binden Sie Ereignisse mit jQuery an dynamische Elemente

Angenommen, Sie verfügen über vorhandenen jQuery-Code, der Ereignishandler an Elemente mit der Klasse .myclass anhängt . In Szenarien, in denen diese Elemente jedoch dynamisch über AJAX oder DHTML zur Seite hinzugefügt werden, ist den neu erstellten Elementen nicht der Klick-Handler zugeordnet.

Problemlösung

Um dieses Problem zu lösen, bietet jQuery mehrere Ansätze:

1. .on()-Methode (jQuery 1.7):

Ersetzen Sie die .live()-Methode durch .on() und geben Sie einen Selektor an, der das übergeordnete Element mit .myclass als Argument kombiniert.

$('body').on('click', 'a.myclass', function() {
    // do something
});

Dadurch wird der Click-Handler an alle angehängt. Tags mit der Klasse .myclass, unabhängig davon, wann sie der Seite hinzugefügt werden.

2. .delegate()-Methode (jQuery 1.6 - 1.8):

Die .delegate()-Methode verhält sich ähnlich wie .on(), erfordert jedoch die Angabe des übergeordneten Elements in Klammern:

$('body').delegate('a.myclass', 'click', function() {
    // do something
});

Sowohl .on() als auch .delegate() ermöglichen die Ereignisbehandlung für dynamisch hinzugefügte Elemente.

Das obige ist der detaillierte Inhalt vonWie hänge ich Event-Handler mit jQuery an dynamisch hinzugefügte Elemente an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!