Wie hänge ich Onclick-Ereignisse mit jQuery an dynamisch hinzugefügte Elemente an?

So binden Sie ein Onclick-Ereignis an dynamisch hinzugefügte HTML-Elemente mit jQuery

Bei der Arbeit mit jQuery ist es oft notwendig, HTML-Elemente dynamisch hinzuzufügen die Seite. In solchen Fällen möchten Sie möglicherweise Event-Handler an diese Elemente anhängen. Das Anhängen von Ereignishandlern an Elemente, die nach dem Laden der Seite hinzugefügt werden, kann jedoch eine Herausforderung sein.

Das Problem und die bisherige Lösung

Traditionell konnte man dazu die Methode .bind() verwenden Hängen Sie Event-Handler an dynamisch hinzugefügte Elemente an. Diese Methode wurde jedoch zugunsten der .on()-Methode veraltet.

Korrekte Lösung mit .on()

Um ein Onclick-Ereignis richtig an ein zu binden Element dynamisch mit jQuery hinzugefügt, sollten Sie die .on()-Methode wie folgt verwenden:

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

In diesem Beispiel wird die .on()-Methode verwendet, um einen Ereignishandler an das Dokument anzuhängen, der die angibt 'click'-Ereignis und den '.my-element'-Selektor. Dadurch wird sichergestellt, dass jedes Element mit der Klasse „my-element“ den Event-Handler auslöst, unabhängig davon, wann es der Seite hinzugefügt wurde.

Beispielverwendung

Hier eine Beispielimplementierung der .on()-Methode:

<div>

In diesem Beispiel wird die .on()-Methode verwendet, um einen Event-Handler an jedes Element mit der Klasse „my-element“ innerhalb der anzuhängen #container div. Wenn auf ein solches Element geklickt wird, wird eine Warnmeldung ausgelöst.

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