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

Cette question a été résolue et a également reçu beaucoup de réponses, mais je veux y ajouter quelque chose. Je cherchais à comprendre pourquoi mon élément de clic se déclenchait 77 fois, et non une seule fois.

Dans mon code, j'avais un each, parcourant une réponse json et l'affichant sous forme de divs avec des boutons. Ensuite, j'ai déclaré l'événement de clic à l'intérieur de l'each.

$(data).each(function(){
    button = $('

Si vous écrivez votre code de cette façon, la classe .test-button recevra plusieurs événements de clic. Par exemple, mes données ont 77 lignes, donc l'each s'exécutera 77 fois, ce qui signifie que je vais décliner l'événement de clic sur la classe 77 fois. Lorsque vous cliquez sur l'élément, il se déclenchera 77 fois.

Mais si vous l'écrivez comme ceci:

$(data).each(function(){
    button = $('

vous déclarez l'élément de clic après l'each. Cela signifie que l'each s'exécutera 77 fois, et l'élément de clic ne sera déclaré qu'une seule fois. Donc, si vous cliquez sur l'élément, il se déclenchera seulement une fois.

Answer 2

Bonjour, désolé de relancer ce post, mais je rencontre ce problème et j'aimerais présenter mon cas.

Mon code ressemble à ceci :

Supprimer
Supprimer
Supprimer
Supprimer

Code JavaScript

 var product = {
     //  Définissez votre fonction
     'add':(product_id)=>{
          //  Faites quelque chose ici
     },

     'delete':(product_id)=>{
         //  Faites quelque chose ici
     }
 }

Answer 3

La classe est indiquée par un point (.) et la méthode click sera déclenchée lorsque vous cliquez sur l'élément ayant la classe donnée addproduct.

$(".addproduct").click(function(){
  //votre logique au clic
  console.log("clic");
})

informations sur le produit
informations sur le produit
informations sur le produit
informations sur le produit
informations sur le produit

Answer 4

J'ai trouvé que lorsque je crée plusieurs éléments dupliqués avec JavaScript et que je les injecte dans le HTML lors du chargement de la page, Jquery .click() ne fonctionne pas.

Dans ce cas, attachez un tag onClick à l'élément html lorsque vous générez l'élément en javascript

$("#items").html('Supprimer');

Ensuite, lorsque vous cliquez sur ce bouton, il exécutera la fonction delete_item() et passera this pour une utilisation ultérieure.

function delete_item(item){

    console.log(item);

}

Answer 5

Ceci est la seule réponse à cela.

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