Comment ajouter des écouteurs d'événements de clic à plusieurs éléments avec la même classe ?

Ajout d'écouteurs d'événements de clic aux éléments de même classe

Dans ce scénario, vous disposez d'une vue de liste pour supprimer des identifiants et souhaitez ajouter une alerte de confirmation pour tous les éléments avec la classe « supprimer ». Cependant, vous avez rencontré un problème où seul le premier élément de la classe semble recevoir l'écouteur.

Solution

Pour résoudre ce problème, vous devez utiliser querySelectorAll au lieu de querySelector. querySelectorAll renvoie une NodeList contenant tous les éléments avec la classe spécifiée :

var deleteLink = document.querySelectorAll('.delete');

Maintenant, vous pouvez parcourir la NodeList et ajouter des écouteurs d'événement à chaque élément :

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

De plus, empêchez uniquement l'action par défaut si l'utilisateur ne confirme pas la suppression. Cela garantit que la suppression n'est exécutée que si l'utilisateur choisit explicitement de continuer.

Améliorations d'ES6

En utilisant ES6, vous pouvez simplifier la boucle en utilisant Array.prototype.forEach :

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', event => {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

Cette version utilise des chaînes de modèles (introduites dans ES2015) pour un syntaxe plus propre.

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!