web-dev-qa-db-fra.com

l'événement jQuery Button.click () est déclenché deux fois

J'ai le problème suivant avec ce code:

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

Si je clique sur ce bouton, l'alerte s'affiche deux fois. Ce n'est pas seulement avec ce bouton spécifique, mais avec chaque bouton que je crée.

Qu'est-ce que je fais mal?

jqueryfunctionbuttonclick
66
user276289

Votre code actuel fonctionne, vous pouvez l'essayer ici: http://jsfiddle.net/s4UyH/

En dehors de l'exemple, quelque chose déclenche un autre .click() , recherchez d'autres gestionnaires qui aussi déclenchent un événement click sur cet élément.

59
Nick Craver

Dans ce cas, nous pouvons faire ce qui suit

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

L'événement a été déclenché à deux reprises au départ. Lorsque la page est rafraîchie, elle est déclenchée à quatre reprises. C’est après de nombreuses heures infructueuses que je me suis débrouillé avec une recherche sur Google.

Je dois également dire que le code fonctionnait initialement jusqu'à ce que je commence à utiliser le widget accordéon JQueryUI.

109
Simeon Abolarinwa

Étrange comportement dont j'ai été expérimenté aussi. Donc, pour moi, "retourne faux" a fait l'affaire.

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });
29
Sergey Onishchenko

Si tu utilises

$( document ).ready({ })

ou 

$(function() { });

plus d’une fois, la fonction clic déclenchera autant de fois qu’elle sera utilisée.

14
nywooz

vous pouvez essayer cela.

    $('#id').off().on('click', function() {
        // function body
    });
    $('.class').off().on('click', function() {
        // function body
    });
9
reza.cse08

J'ai eu le même problème et j'ai tout essayé mais cela n'a pas fonctionné. J'ai donc utilisé le truc suivant:

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

Vous vérifiez si ce paramètre n'est pas nul que le code. Ainsi, lorsque la fonction sera déclenchée une deuxième fois, elle indiquera ce que vous voulez.

3
Vlad Isoc

Comme ce que Nick essaie de dire, quelque chose d'extérieur déclenche deux fois l'événement. Pour résoudre ce problème, vous devez utiliser event.stopPropagation () afin d'empêcher la propagation de l'élément parent.

$('button').click(function(event) {
    event.stopPropagation();
});

J'espère que ça aide.

1
Riel Stephen Abrenio

Cela peut être causé pour les raisons suivantes:

  1. Soit vous avez inclus le script plusieurs fois dans le même fichier html
  2. Vous a déjà ajouté l'écouteur d'événement à l'aide de l'attribut onclick de l'élément.
  3. Si vous utilisez template inheritance comme extends dans Django, vous avez probablement inclus le script dans plusieurs fichiers qui sont combinés ensemble par include ou extend
  4. L'événement est bouillonné jusqu'à un élément parent.
  5. Si vous utilisez le modèle Django, vous avez mal placé un block dans un autre .

Donc, vous devriez soit les trouver et supprimer l’importation en double. C'est la meilleure chose à faire.

Une autre solution consiste à supprimer tous les écouteurs d'événement click dans le script, comme suit:

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

Vous pouvez ignorer event.stopPropagation(); si vous êtes sûr que l'événement n'est pas bouillonné.

1
Mohammed Shareef C

Cela peut également être déclenché en ayant à la fois input et labelà l'intérieur l'élément avec l'écouteur de clics.

Vous cliquez sur la label, ce qui déclenche un événement click et aussi} un autre événement click sur la input pour la label. Les deux événements marquent votre élément.

Voir ce stylo d'une bascule fantaisie réservée aux CSS: https://codepen.io/stepanh/pen/WaYzzO

Remarque: Ceci est pas jQuery spécifique, l’auditeur natif est déclenché 2x aussi bien qu’il est montré dans le stylo.

1
Stepan

J'ai constaté que la liaison d'un élément.click dans une fonction qui se produit plus d'une fois le mettait en file d'attente; ainsi, lors de la prochaine activation, elle se déclenchera autant de fois que la fonction de liaison aura été exécutée. Erreur du nouveau venu probablement de mon côté mais j'espère que ça aide. TL, DR: assurez-vous de relier tous les clics sur une fonction de configuration qui ne se produit qu'une fois.

1
igarciaoliver

dans mon cas, j'utilisais la commande de changement comme ceci

$(document).on('change', '.select-brand', function () {...my codes...});

et puis j'ai changé la façon de 

$ ('. select-brand'). on ('change', function () {... mes codes ...});

et cela a résolu mon problème.

0
sh6210
$("#id").off().on("click", function() {

});

Travaillé pour moi.

$("#id").off().on("click", function() {

});
0
Shahid Hussain Abbasi