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

Désolé d'avoir relancé ce vieux fil de discussion. J'avais le même problème juste maintenant et je voulais partager ma solution.

$(".votreClasseBouton").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    //(... reste de votre code JS)
});

event.StopPropagation et event.StopImmediatePropagation() devraient faire l'affaire.

Avoir un sélecteur de classe .class pour le gestionnaire d'événements entraînera la propagation de l'événement de clic (parfois vers l'élément parent, parfois vers les éléments enfants dans le DOM).

La méthode event.StopPropagation() assure que l'événement ne se propage pas aux éléments parents, tandis que la méthode event.StopImmediatePropagation() assure que l'événement ne se propage pas aux enfants des éléments de la classe sélectionnée souhaitée.

Sources : https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

Answer 2

$(document).on('click', '.ajouterproduit', function () {
    // votre fonction ici
});

Answer 3

Pouvons-nous voir votre gestionnaire de clics ? Vous attachez 5 écouteurs à 5 éléments différents. Cependant, lorsque l'utilisateur clique sur l'élément, un seul événement est déclenché.

$(".addproduct").click(function(){
  // Contient l'ID du produit de l'élément cliqué
  var productId = $(this).attr('class').replace('addproduct ', '');

  addToCart(productId);
});

Si cette solution ne fonctionne pas, j'aimerais examiner votre gestionnaire de clics.

Answer 4

Lorsque vous cliquez sur un div avec la classe addproduct, un événement est déclenché pour cet élément particulier, pas cinq. Vous faites quelque chose de mal dans votre code si l'événement est déclenché 5 fois.

Answer 5

Dans cette situation, je essaierais:

$(document).on('click','.addproduct', function(){

    //votre code ici

 });

ensuite, si vous devez effectuer quelque chose dans les autres éléments avec la même classe lors du clic sur l'un d'eux, vous pouvez boucler à travers les éléments:

$(document).on('click','.addproduct', function(){
   $('.addproduct').each( function(){

      //votre code ici
     }
  );
 }
);