L'événement click () appelle deux fois dans jquery

J'ai configuré un élément de lien et appelé son événement de clic dans jquery mais l'événement de clic appelle deux fois, veuillez voir ci-dessous le code de jquery.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

S'il vous plaît donnez votre avis.

Merci.

Assurez-vous et vérifiez que vous n'avez pas accidentellement inclus deux fois votre script dans votre page HTML.

Faites un détachement avant le clic;

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Cela signifie que votre code a inclus deux fois le script jquery. Mais essayez ceci:

$("#btn").unbind("click").click(function(){

//your code

});

J'ai essayé e.stopImmediatePropagation(),; Cela semble fonctionner pour moi.

Dans mon cas, j'ai utilisé le script ci-dessous pour résoudre le problème

$('#id').off().on('click',function(){
    //...
});

off()dissocie tous les événements auxquels se lie #id. Si vous souhaitez dissocier uniquement l' clickévénement, utilisez off('click').

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 par «clic»:

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

Une solution assez courante au problème des deux clics consiste à mettre

e.stopPropagation()

à la fin de votre fonction (en supposant que vous l'utilisiez function(e)). Cela empêche l'événement de bouillonner, ce qui pourrait conduire à une seconde exécution de la fonction.

J'ai eu le même problème, mais vous pouvez essayer de changer ce code

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

pour ça:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Pour moi, ce code a résolu le problème. Mais veillez à ne pas inclure accidentellement votre script deux fois dans votre page HTML. Je pense que si vous faites ces deux choses correctement, votre code fonctionnera correctement. Merci

essayez ceci

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

C'est certainement un bogue spécialement lorsqu'il s'agit de FireFox. J'ai cherché beaucoup d'essais toutes les réponses ci-dessus et j'ai finalement obtenu un bug par de nombreux experts sur SO. Donc, j'ai finalement eu cette idée en déclarant une variable comme

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

De cette façon, il vérifie d'abord plutôt que la fonction a été précédemment appelée ou non.

L'ajout e.preventDefault();au début de ma fonction a fonctionné pour moi.

C'est une question plus ancienne, mais si vous utilisez la délégation d'événements, c'est ce qui l'a causé pour moi.

Après la suppression, .delegate-twoil a cessé de s'exécuter deux fois. Je pense que cela se produit si les deux délégués sont présents sur la même page.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

cet extrait de code ne contient rien de mauvais. C'est une autre partie de votre script comme l'a dit @karim

Dans mon cas, cela fonctionnait bien dans Chrome et IE appelait .click()deux fois. si c'était votre problème, je l'ai résolu en retournant false, après avoir appelé l' .click()événement

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

L'appel a unbindrésolu mon problème:

$("#btn").unbind("click").click(function() {
    // your code
});

Je ne sais pas pourquoi mais j'ai eu ce problème avec

$(document).on("click", ".my-element", function (e) { });

Quand je l'ai changé en

$(".my-element").click(function () { });

Le problème a été résolu. Mais certainement quelque chose ne va pas dans mon code.

J'ai été trompé par une sélection correspondant à plusieurs éléments, donc chacun a été cliqué. :firstaidé:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

J'ai aussi eu ce problème sur FF. Mon tag était cependant lié à un <a>tag. Bien que la <a>balise n'aille nulle part, elle a quand même fait un double clic. J'ai remplacé le <a>tag par un <span>tag et le problème du double clic a disparu.

Une autre alternative consiste à supprimer complètement l'attribut href si le lien ne mène nulle part.

J'ai rencontré ce problème car mon $(elem).click(function(){});script a été placé en ligne dans un div défini sur style="display:none;".

Lorsque l'affichage css passait en mode blocage, le script ajoutait l'écouteur d'événement une seconde fois. J'ai déplacé le script vers un fichier .js séparé et l'écouteur d'événements en double n'était plus lancé.

Lorsque j'utilise cette méthode sur la page de chargement avec jquery, j'écris $('#obj').off('click');avant de définir la fonction de clic, de sorte que la bulle ne se produit pas. Travaille pour moi.

Ma réponse simple a été de transformer le lien de clic en fonction et d'appeler cela d'un seul clic de l'élément - a fonctionné un régal! alors qu'aucune de ces réponses

Si votre événement appelle deux ou trois fois, ou plus, cela peut vous aider.

Si vous utilisez quelque chose comme celui-ci pour déclencher des événements…

$('.js-someclass').click();

… Alors faites attention au nombre d' .js-someclasséléments que vous avez sur la page, car cela déclenchera l'événement de clic pour tous les éléments - et pas une seule fois!

Une solution simple consiste alors à vous assurer de déclencher le clic une seule fois, en sélectionnant uniquement le premier élément , par exemple:

$('.js-someclass:first').click();

Bien sûr, quelque part ailleurs dans votre (vos) script (s), l'événement "click" est à nouveau lié au même élément, comme le suggèrent plusieurs autres réponses / commentaires.

J'ai eu un problème similaire et pour vérifier cela, j'ai simplement ajouté une console.logcommande à mon script, comme dans l'extrait de code suivant:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Si, en cliquant sur le bouton, vous obtenez quelque chose de similaire à l'image ci-dessous à partir de la console de développement de votre navigateur (comme je l'ai fait), vous savez avec certitude que l' click()événement a été lié deux fois au même bouton.

Si vous avez besoin d'un patch rapide, la solution proposée par d'autres commentateurs d'utiliser la offméthode (btw unbindest obsolète depuis jQuery 3.0) pour dissocier l'événement avant de le (re) lier fonctionne bien, et je le recommande aussi:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

Malheureusement, ce n'est qu'un patch temporaire! Une fois que le problème de rendre votre patron heureux est résolu, vous devriez vraiment creuser un peu plus votre code et résoudre le problème de "liaison dupliquée".

La solution réelle dépend bien sûr de votre cas d'utilisation spécifique. Dans mon cas, par exemple, il y avait un problème de «contexte». Ma fonction était invoquée à la suite d'un appel Ajax appliqué à une partie spécifique du document: recharger l'ensemble du document rechargeait en fait à la fois les contextes «page» et «élément», ce qui entraînait la liaison deux fois de l'événement à l'élément .

Ma solution à ce problème consistait à tirer parti de la fonction jQuery one , qui est la même que sur, à l'exception du fait que l'événement est automatiquement dissocié après son premier appel. C'était idéal pour mon cas d'utilisation, mais encore une fois, ce n'est peut-être pas la solution pour d'autres cas d'utilisation.

Avait le même problème. Cela a fonctionné pour moi -

$('selector').once().click(function() {});

J'espère que cela aide quelqu'un.

Dans mon cas, le HTML était présenté comme ceci:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

Et mon jQuery était comme ceci:

jQuery('.share').toggle();

Cela m'a dérouté parce que rien ne semblait se passer. Le problème était que les .shares internes toggle annuleraient les .shares externes toggle.

J'ai résolu ce problème en modifiant le type d'élément. au lieu du bouton, je place une entrée, et ce problème ne se produit plus.

instesd de:

<button onclick="doSomthing()">click me</button>

remplacer par:

<input onclick="doSomthing()" value="click me">