Comment attribuer correctement des gestionnaires d'événements aux éléments générés dynamiquement en JavaScript à l'aide de boucles ?

Génération de gestionnaires d'événements avec des boucles en Javascript

Lorsque vous travaillez avec des pages Web dynamiques, il devient souvent nécessaire d'attribuer des gestionnaires d'événements à plusieurs éléments qui sont générés par programme. Ceci peut être réalisé grâce à l'utilisation de boucles, garantissant une gestion efficace et centralisée.

Un scénario courant consiste à générer plusieurs balises d'ancrage (a) à partir d'une réponse AJAX, où chaque balise nécessite un événement onclick qui alerte un numéro correspondant. . Cependant, une approche de boucle naïve comme celle-ci peut ne pas fonctionner comme prévu :

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

Dans cet exemple, tous les gestionnaires d'événements partagent la même variable i, ce qui entraîne le dernier gestionnaire à écraser les précédents et à alerter " 11" quelle que soit la balise sur laquelle vous avez cliqué.

Pour résoudre ce problème, il est crucial de créer une fermeture pour chaque gestionnaire, en passant i comme paramètre. Cela garantit que chaque fonction a sa propre valeur i unique :

function handleElement(i) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

Avec l'utilisation de la fonction handleElement, chaque gestionnaire d'événements se voit attribuer un i unique, permettant d'afficher le message d'alerte correct lorsque l'ancre correspondante la balise est cliquée.

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!