IP Girl
  1. IP Girl
  3. jQuery $ (“. class”). click (); – plusieurs éléments, cliquez sur l’événement une fois
Intereting Posts
Comment lire le champ mode de la sortie de git-ls-tree La bonne façon d’écrire le désérialiseur JSON au spring ou de l’étendre Unité testant une classe avec une horloge Java 8 @interface et explication @protocol? Java – La variable null nécessite-t-elle de l’espace en mémoire Si déclaration vs instruction if-else, qui est plus rapide? les appels jQuery Ajax et le HTML.AntiForgeryToken () AssertContains sur des chaînes de caractères dans jUnit Ruby on Rails: obtenir la valeur maximale d’une colonne de firebase database Comment puis-je attraper un événement ctrl-c? (C ++) Quelle est la meilleure façon de filtrer un fichier dans une chaîne en Perl? Impossible de déterminer les informations SVN en amont de l’historique HEAD Quel est l’argument de printf qui formate un long? Des références fortes et faibles dans Swift Casser les modifications dans .NET 4.0

jQuery $ (“. class”). click (); – plusieurs éléments, cliquez sur l’événement une fois

J’ai plusieurs classes sur une page du même nom. J’ai ensuite un événement .click () dans mon JS. Ce que je veux faire, c’est que l’événement de clic ne se produise qu’une seule fois, quelles que soient les classes de ma page.

Le scénario est que j’utilise AJAX pour append au panier. Parfois, sur la page d’accueil, il peut y avoir un produit en vedette et une offre supérieure, ce qui signifie que la même classe .add. # Productid # est présente.

J’ai pensé à créer des “zones de clic”, donc j’aurais un .container-name .add. # Pid # donnant ainsi des clics uniques.

Est-ce la seule solution? 

product info
 
product info
 
product info
 
product info
 
product info
 $(".addproduct").click(function(){//do something fired 5 times});

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

 $(document).on('click', '.addproduct', function () { // your function here });

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

 $(".addproduct").click(function(){ // Holds the product ID of the clicked element var productId = $(this).attr('class').replace('addproduct ', ''); addToCart(productId); });

Si cette solution ne fonctionne pas, j’aimerais consulter votre gestionnaire de clics.

Toutes mes excuses pour avoir percuté ce vieux fil. J’ai eu le même problème en ce moment et je voulais partager ma solution. 

 $(".yourButtonClass").on('click', function(event){ event.stopPropagation(); event.stopImmediatePropagation(); //(... rest of your JS code) });

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

Avoir un sélecteur .class pour le gestionnaire d’événement entraînera la bubbling de l’événement click (parfois vers l’élément Parent, parfois vers les éléments Children dans DOM).

event.StopPropagation() méthode event.StopPropagation() garantit que l’événement ne event.StopPropagation() pas avec les éléments Parent, tandis que la méthode event.StopImmediatePropagation() garantit que l’événement ne crée pas de bulle dans les éléments Children du sélecteur de classe souhaité.

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

Je pense que vous ajoutez un événement click cinq fois. Essayez de compter combien de fois vous faites cela. 

 console.log('add click event') $(".addproduct").click(function(){ });

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

 $(".addproduct").unbind().click(function(){ //do something });

Dans cette situation, je voudrais essayer: 

 $(document).on('click','.addproduct', function(){ //your code here });

alors, si vous devez effectuer quelque chose dans les autres éléments avec la même classe, cliquez dessus, vous pouvez parcourir les éléments en boucle: 

 $(document).on('click','.addproduct', function(){ $('.addproduct').each( function(){ //your code here } ); } );

J’ai juste eu le même problème. Dans mon cas, le code PHP a généré peu de fois le même code jQuery et c’était le déclencheur multiple. 

 Popraw / Zgłoś

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

Ma solution était de séparer le script dans un autre fichier php et de charger ce fichier une fois.

Je l’ai résolu en utilisant l’appel de la fonction jquery en ligne comme

Entrez simplement le code iciDans JQuery, les événements sont déclenchés. Il vous suffit de vérifier le nombre d’occurrences des classes dans le fichier et d’utiliser pour la boucle la logique suivante. pour identifier le nombre d’occurrences d’une classe, d’une balise ou de tout élément DOM via JQuery: var len = $ (“. addproduct”). length; 

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

Je l’ai essayé moi-même dans mon projet.

Toutes mes lignes dans une table ont une classe “contact”:

Toutes mes lignes dans une table ont une classe

Mon code ressemble à ceci: 

 var contactManager = {}; contactManager.showEditTools = function(row) { console.debug(row); } $('.contact').click(function(event){ console.log("this should appear just once!"); alert("I hope this will appear just once!"); contactManager.showEditTools(event); });

Et j’ai d’abord eu peur de voir mes lignes entières dans la console Firebug lorsque j’ai exécuté le code:

Capture d'écran de la console Firebug après l'exécution du code

Mais alors j’ai réalisé que l’événement de clic n’était pas déclenché, car aucune boîte de dialog d’alerte n’est apparue. Firebug ne vous montre que les éléments affectés par les clics. Donc, il n’y a rien à craindre.

Essayez d’utiliser le gestionnaire .off() : 

 $(function () { $(".archive-link").click(function (e) { var linkObj = $(this); var cb = $("#confirm-modal"); cb.find(".modal-body").append("
Warning message.
"); cb.modal('show'); cb.find(".confirm-yes").click(function () { $(this).off(); //detach this event //ajax call yada yada.. }

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

Au premier clic, l’événement ne se déclenche que sur cet object .archive-link auquel j’ai demandé à la fonction d’agir ( var linkObj ). Mais lorsque je clique sur le même lien la deuxième fois et que je clique sur OK sur le modal, l’événement se déclenche sur chaque object ayant .archive-link lequel j’ai cliqué auparavant.

J’ai utilisé les solutions ci-dessus mais malheureusement n’a pas fonctionné. C’est lorsque j’ai appelé .off () dans le bouton OK modal que la fonction de clic s’est arrêtée. J’espère que ça aide.

J’ai eu le même problème. La cause en était que j’avais le même jquery plusieurs fois. Il a été placé en boucle. 

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

Pour cette raison tirait plusieurs fois

votre événement est déclenché une seule fois … donc ce code peut fonctionner essayer ceci 

  $(".addproduct,.addproduct,.addproduct,.addproduct,.addproduct").click(function(){//do something fired 5 times});