Wie hänge ich Ereignis-Listener an dynamisch erstellte Elemente in JavaScript an?

Ereignisse an dynamisch erstellte Elemente in JavaScript anhängen

Beim Versuch, dynamische Elemente an eine dynamisch erstellte Liste anzuhängen und einen Ereignis-Listener hinzuzufügen Bei dynamisch erstellten Elementen werden die Ereignisse möglicherweise nicht ausgelöst. Dies liegt daran, dass die Elemente zum Zeitpunkt des Anhängens der Ereignis-Listener nicht verfügbar sind.

Um dieses Problem zu beheben, kann die Ereignisdelegierung eingesetzt werden. Bei dieser Technik werden Ereignis-Listener an ein übergeordnetes Element angehängt, das die dynamisch erstellten Elemente enthält.

Betrachten Sie beispielsweise den folgenden Code:

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // or any other selector

  if (target) {
    // Do something with 'target'
  }
});

In diesem Beispiel handelt es sich um einen Ereignis-Listener Wird an das Dokumentobjekt angehängt und wartet auf Klickereignisse. Mit der Funktion „nearest()“ wird ermittelt, ob das Klickereignis von einem Element mit dem Selektor #btnPrepend (oder einem anderen definierten Selektor) stammt. Wenn eine Übereinstimmung gefunden wird, wird das Ereignis entsprechend behandelt.

Alternativ bietet jQuery einen vereinfachten Ansatz zur Ereignisdelegierung:

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`
});

Diese Methode hängt einen Ereignis-Listener an das Dokumentobjekt an und lauscht für Klickereignisse speziell auf Elemente mit dem Selektor #btnPrepend.

Das obige ist der detaillierte Inhalt vonWie hänge ich Ereignis-Listener an dynamisch erstellte Elemente in JavaScript an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!