Comment attacher des écouteurs d'événements à des éléments créés dynamiquement en JavaScript ?

Attachement d'événements à des éléments créés dynamiquement en JavaScript

Lorsque vous essayez d'ajouter des éléments dynamiques à une liste créée dynamiquement et d'ajouter un écouteur d'événement au éléments créés dynamiquement, les événements peuvent ne pas se déclencher. En effet, les éléments ne sont pas disponibles au moment où les écouteurs d'événement sont attachés.

Pour résoudre ce problème, la délégation d'événement peut être utilisée. Cette technique consiste à attacher des écouteurs d'événements à un élément de niveau supérieur qui contient les éléments créés dynamiquement.

Par exemple, considérons le code suivant :

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

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

Dans cet exemple, un écouteur d'événements est attaché à l'objet document, à l'écoute des événements de clic. La fonction close() est utilisée pour déterminer si l'événement click provient d'un élément avec le sélecteur #btnPrepend (ou de tout autre sélecteur défini). Si une correspondance est trouvée, l'événement est traité en conséquence.

Alternativement, jQuery propose une approche simplifiée de la délégation d'événements :

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

Cette méthode attache un écouteur d'événement à l'objet document, en écoutant pour les événements de clic spécifiquement sur les éléments avec le sélecteur #btnPrepend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!