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

Je pense que vous ajoutez l'événement de clic cinq fois. Essayez de compter combien de fois vous le faites.

console.log('ajouter un événement de clic')
$(".addproduct").click(function(){ });

Answer 2

Cela devrait le résoudre et cela devrait être une bonne habitude: .unbind()

$(".addproduct").unbind().click(function(){
   //faire quelque chose 
});

Answer 3

J'ai résolu ce problème en utilisant un appel de fonction jQuery en ligne tel que

  function testFunction(current){
     // votre code va ici
  }

Answer 4

J'ai eu le même problème. Dans mon cas, le code PHP générait plusieurs fois le même code jQuery et c'était le déclencheur multiple.

Popraw / Zgłoś

(PHP MULTIPLE GENERATER NUMBERS générait également le même code plusieurs fois)

$('.report').click(function(){...});

Ma solution a été de séparer le script dans un autre fichier php et de charger ce fichier UNE SEULE FOIS.

Answer 5

$(document).ready(function(){

    $(".addproduct").each(function(){
          $(this).unbind().click(function(){
               console.log('div is clicked, my content => ' + $(this).html());
           });
     });
}); 

informations sur le produit 1
informations sur le produit 2
informations sur le produit 3
informations sur le produit 4
informations sur le produit 5