JQuery $(".class").click(); - plusieurs éléments, événement de clic une fois

Question

J'ai plusieurs classes sur une page du même nom. Ensuite, j'ai un événement .click() dans mon JS. Ce que je veux, c'est que l'événement de clic ne se produise qu'une seule fois, quel que soit le nombre de classes sur ma page.

Le scénario est que j'utilise AJAX pour ajouter au panier. Parfois, sur la page d'accueil, il peut y avoir un produit en vedette et une offre de premier plan, ce qui signifie que la même classe .add .#productid# est là et lorsqu'on clique, l'AJAX d'ajout au panier est déclenché deux fois.

J'ai pensé à créer des 'zones de clic' donc j'aurais .container-name .add .#pid# donnant ainsi des clics uniques.

Est-ce la seule solution?

infos sur le produit
infos sur le produit
infos sur le produit
infos sur le produit
infos sur le produit

$(".addproduct").click(function(){//faire quelque chose déclenché 5 fois});

Answer 1

J'ai eu le même problème. La cause était que j'avais le même jquery plusieurs fois. Il était placé dans une boucle.

$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});

Pour cette raison, il se déclenchait plusieurs fois

Answer 2

Il suffit d'entrer le code iciEn JQuery, une fois qu'un événement est déclenché, vous vérifiez simplement le nombre d'occurrences de classes dans le fichier et utilisez une boucle for pour la logique suivante. pour identifier le nombre d'occurrences de n'importe quelle classe, balise ou élément DOM à travers JQuery : var len = $(".addproduct").length;

 $(".addproduct").click(function(){
       var len = $(".addproduct").length; 
       for(var i=0;i

Answer 3

Faites juste le code ci-dessous, ça fonctionne absolument bien

$(".addproduct").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    getRecord();
});

function getRecord(){
   $(".addproduct").each(function () {
       console.log("test");
       });

}

Answer 4

J'ai essayé moi-même dans mon projet.

Toutes mes lignes dans un tableau ont une classe "contact" :

Mon code ressemble à ceci :

var contactManager = {};

contactManager.showEditTools = function(row) {
  console.debug(row);
}

$('.contact').click(function(event){
  console.log("Cela devrait apparaître une seule fois !");
  alert("J'espère que cela apparaîtra une seule fois !");
  contactManager.showEditTools(event);
});

Et j'ai d'abord eu peur de voir toutes mes lignes comme résultat dans la console de Firebug lorsque j'ai exécuté le code :

Mais ensuite j'ai réalisé que l'événement de clic n'était pas déclenché, car aucune boîte de dialogue d'alerte n'est apparue. Firebug vous montre simplement les éléments qui sont affectés par le clic. Il n'y a donc pas de quoi s'inquiéter.

Answer 5

Essayez d'utiliser le gestionnaire .off() :

$(function () {
    $(".archive-link").click(function (e) {
        var linkObj = $(this);
        var cb = $("#confirm-modal");
        cb.find(".modal-body").append("Message d'avertissement.");
        cb.modal('show'); 
        cb.find(".confirm-yes").click(function () {
            $(this).off(); //détache cet événement
            //appel ajax yada yada..
        }

J'attache un gestionnaire d'événements de clic sur un bouton OK modal pour agir sur l'événement clic de l'objet avec la classe .archive-link.

Au premier clic, l'événement se déclenche uniquement sur cet objet .archive-link sur lequel j'ai demandé à la fonction d'agir (var linkObj). Mais lorsque je clique sur le même lien une deuxième fois et que je clique sur OK dans la modal, l'événement se déclenche sur tous les objets ayant la classe .archive-link sur lesquels j'ai cliqué avant.

J'ai essayé les solutions ci-dessus mais malheureusement elles n'ont pas fonctionné. C'est lorsque j'ai appelé .off() à l'intérieur de la fonction de clic sur le bouton OK de la modal que la propagation s'est arrêtée. J'espère que cela aide.