Ajouter cliquez sur l'écouteur d'événements pour les éléments avec la même classe

J'ai une vue de liste pour supprimer l'id. J'aimerais ajouter un écouteur à tous les éléments avec une classe particulière et de faire confirmer l'alerte.

Mon problème est que cela ne fait qu'ajouter à l'auditeur pour le premier élément avec la classe qu'il trouve. J'ai essayé d'utiliser querySelectorAll mais il ne fonctionne pas. 

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

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

Liste:

<?php 
    while($obj=$result->fetch_object())
    {
        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'
            . '<a href="#" class="delete"></a>
                      </li>'."\n";
    }
    /* free result set */
    $result->close();       
    $mysqli->close();
?>
  • Pourquoi taggés avec jQuery? BTW, vous auriez mieux délégué de l'événement au lieu de définir pour chacun d'eux .supprimer l'élément propre gestionnaire
InformationsquelleAutor user1246950 | 2014-02-11
  1. 112

    Vous devez utiliser querySelectorAll. Il retourne NodeList, cependant querySelector renvoie uniquement le premier élément trouvé:

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

    Alors vous seriez en boucle:

    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();
        }
    });
}

    Aussi, vous devez preventDefault seulement si confirm === false.

    Il est également intéressant de noter que return false/true est seulement utile pour les gestionnaires d'événements liés à onclick = function() {...}. Pour addEventListening vous devez utiliser event.preventDefault().

    Démo: http://jsfiddle.net/Rc7jL/3/

    ES6 version

    Vous pouvez en faire un peu plus propre (et le plus sûr fermeture en boucle sage) à l'aide de Tableau.le prototype.forEach itération au lieu de pour-boucle:

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

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


    L'exemple ci-dessus utilise Tableau.à partir de et modèle de chaînes de caractères de ES2015 standard.

    • j'ai essayé ça mais ça ne fonctionne pas je n'ai for(int i=0...)deletelink[i].la méthode addEventListener('click', function(event) { event.preventDefault(); var choix = confirm("bien sûr que tu veux supprimer?"); if (choix) { return true; } });
    • Jetez un oeil à la démo que j'ai mis en place.
    • je suppose que j'ai fait la même chose worng quand je l'ai fait la première fois thx u :))
    • Une autre astuce est d'utiliser le écart opérateur qui travaille sur le tableau-comme des objets. Ainsi, au lieu de Array.from(deleteLinks), vous pouvez le faire [...deleteLinks]. Je pense que Array.from est plus clair, mais juste une chose mérite d'être souligné.
    InformationsquelleAutor dfsq
  2. 48

    Le problème avec l'aide de querySelectorAll et un for boucle, c'est qu'il crée un tout nouveau gestionnaire d'événement pour chaque élément dans le tableau.

    Parfois, c'est exactement ce que vous voulez. Mais si vous avez de nombreux éléments, il peut être plus efficace de créer un seul gestionnaire d'événements et de l'attacher à un élément conteneur. Vous pouvez ensuite utiliser event.target à référencer l'élément qui a déclenché l'événement:

    document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("delete")) {
    var title = event.target.getAttribute("title");

    if (!confirm("sure u want to delete " + title)) {
      event.preventDefault();
    }
  }
});

    Dans cet exemple, nous créer un gestionnaire d'événement qui est attaché à la body élément. Chaque fois qu'un élément à l'intérieur de la body est cliqué, la click événement bulles à notre gestionnaire d'événement.

    InformationsquelleAutor jackvsworld
  3. 20

    Un court et doux solution, en utilisant ES6:

    document.querySelectorAll('.input')
      .forEach(input => input.addEventListener('focus', this.onInputFocus));
    InformationsquelleAutor Francisco Hodge
  4. 6

    Vous devez utiliser querySelectorAll que vous devez sélectionner tous les éléments avec la classe dit, encore une fois depuis querySelectorAll est un tableau, vous devez parcourir et ajouter des gestionnaires d'événements

    var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function (event) {
        event.preventDefault();

        var choice = confirm("sure u want to delete?");
        if (choice) {
            return true;
        }
    });
}
    • Cette réponse est un peu vieux (3,5 ans), mais je me dois de rectifier que querySelectorAll ne retourne pas une Array, mais un NodeList, qui ressemble à une Array mais qui n'ont pas les mêmes méthodes.
    InformationsquelleAutor Arun P Johny