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 vorherige 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 Methode .on() verwendet, um einen Ereignishandler an das Dokument anzuhängen, der das Ereignis „click“ und den Selektor „.my-element“ angibt. Dadurch wird sichergestellt, dass jedes Element mit der Klasse „my-element“ den Event-Handler auslöst, unabhängig davon, wann es zur Seite hinzugefügt wurde.

Beispielverwendung

Hier ist eine Beispielimplementierung der .on()-Methode:

In diesem Beispiel wird die .on()-Methode zum Anhängen verwendet ein Ereignishandler für jedes Element mit der Klasse „my-element“ innerhalb des #container-Div. Wenn auf ein solches Element geklickt wird, wird eine Warnmeldung ausgelöst.