JQuery clique les événements en tirant plusieurs fois

Pour vous assurer que les actions d'un clic uniquement utilisent ceci:

 $(".bet").unbind().click(function() { //Stuff }); 

.unbind() est obsolète et vous devez utiliser la méthode .off() . Appelez simplement .off() juste avant d'appeler .on() .

Cela supprimera tous les gestionnaires d'événements:

 $(element).off().on('click', function() { // function body }); 

Pour supprimer uniquement les gestionnaires d'événements enregistrés «cliquer»:

 $(element).off('click').on('click', function() { // function body }); 

.un()

Une meilleure option serait .one() :

Le gestionnaire est exécuté au plus une fois par élément par type d'événement.

 $(".bet").one('click',function() { //Your function }); 

Dans le cas de plusieurs classes et chaque classe doit être cliquée une fois,

 $(".bet").on('click',function() { //Your function $(this).off('click'); //or $(this).unbind() }); 

Si vous trouvez que .off () .unbind () ou .stopPropagation () ne résout pas encore votre problème spécifique, essayez d'utiliser .stopImmediatePropagation () Fonctionne bien lorsque vous souhaitez que votre événement soit traité sans bouillonnement et sans Effectuant tout autre événement déjà traité. Quelque chose comme:

 $(".bet").click(function(event) { event.stopImmediatePropagation(); //Do Stuff }); 

Fait l'affaire!

Si vous appelez cette fonction sur chaque «clic», vous ajoutez une autre paire de gestionnaires à chaque appel.

L'ajout de gestionnaires avec jQuery n'est pas comme configurer la valeur de l'attribut "onclick". On peut ajouter autant de gestionnaires que l'on le désire.

Cela se produit en raison de l'événement particulier est lié plusieurs fois au même élément.

La solution qui a fonctionné pour moi est:

Tuez tous les événements liés en utilisant la méthode .die() .

Ensuite, connectez votre auditeur de méthode.

Ainsi,

 $('.arrow').click(function() { // FUNCTION BODY HERE } 

devrait être:

 $('.arrow').die("click") $('.arrow').click(function() { // FUNCTION BODY HERE } 

C'est un vieux problème, mais je l'ai fait face aujourd'hui, et je pense que ma réponse aidera le futur demandeur de défis similaires.

Il est exécuté à plusieurs reprises, car la fonction "on ('click', somefunction)" est appelée plusieurs fois et donc elle est reliée à plusieurs reprises – pour résister de façon permanente, vous devez vous assurer que la fonction "on" fonctionne dans un tel Placez qu'il ne sera exécuté qu'une seule fois. Après quoi, sur l'événement de clic de souris, la fonction sera déclenchée une seule fois.

Par exemple si je met "on ('click', somefunction)" dans un endroit où il sera chargé deux fois, puis à chaque clic – "somefunction" sera déclenché deux fois.

Dans une séquence logique correcte, la fonction "off" ne doit être utilisée que lorsque vous avez vraiment l'intention de débrancher les événements. Pour l'utiliser pour cacher les erreurs logiques causées par le double chargement de la fonction "on", n'est pas une bonne approche même si cela semble fonctionner.

Nous devons stopPropagation() afin d'éviter les déclencheurs déclenche l'événement trop souvent.

 $(this).find('#cameraImageView').on('click', function(evt) { evt.stopPropagation(); console.log("Camera click event."); }); 

Il empêche l'événement de faire bouillir l'arborescence DOM, empêchant tout gestionnaire parent d'être informé de l'événement. Cette méthode n'accepte aucun argument.

Nous pouvons utiliser event.isPropagationStopped() pour déterminer si cette méthode a été appelée (sur cet objet d'événement).

Cette méthode fonctionne également pour des événements personnalisés déclenchés avec trigger (). Notez que cela n'empêchera pas les autres gestionnaires du même élément de s'exécuter.

J'ai eu un problème à cause du balisage.

HTML:

 <div class="myclass"> <div class="inner"> <div class="myclass"> <a href="#">Click Me</a> </div> </div> </div> 

JQuery

 $('.myclass').on('click', 'a', function(event) { ... } ); 

Vous remarquez que j'ai la même classe 'myclass' deux fois en html, alors il appelle cliquez pour chaque instance de div.

La meilleure option serait utilisée

 <script> function flash() { $("div").show().fadeOut("slow"); } $("#bind").click(function() { $( "body" ) .on("click", "#theone", flash) .find("#theone") .text("Can Click!"); }); $("#unbind").click(function() { $("body") .off("click", "#theone", flash) .find("#theone") .text("Does nothing..."); }); </script> 

Toutes les choses sur .on () et .one () sont formidables, et jquery est génial.

Mais parfois, vous voulez qu'il soit un peu plus évident que l'utilisateur n'a pas le droit de cliquer, et dans ces cas, vous pouvez faire quelque chose comme ceci:

 function funName(){ $("#orderButton").prop("disabled", true); // do a bunch of stuff // and now that you're all done setTimeout(function(){ $("#orderButton").prop("disabled",false); $("#orderButton").blur(); }, 3000); } 

Et votre bouton ressemblerait à:

 <button onclick='funName()'>Click here</button> 

 $(element).click(function (e) { if(e.timeStamp !== 0) // This will prevent event triggering more then once { //do your stuff } } 

https://jsfiddle.net/0vgchj9n/1/

Pour vous assurer que l'événement ne se déclenche que d'une seule fois, vous pouvez utiliser Jquery .one (). JQuery One garantit que votre gestionnaire d'événements ne soit appelé qu'une seule fois. En outre, vous pouvez souscrire votre gestionnaire d'événements avec un seul pour permettre d'autres clics lorsque vous avez terminé le traitement de l'opération de clic actuel.

 <div id="testDiv"> <button class="testClass">Test Button</button> </div> 

…

 var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);}; function clickHandler() { //... perform the tasks alert("you clicked the button"); //... subscribe the click handler again when the processing of current click operation is complete subscribeClickEvent(); } subscribeClickEvent();