web-dev-qa-db-fra.com

bouton onclick fonction tirant deux fois

J'ai un bouton qui appelle une fonction javascript à l'aide d'un gestionnaire d'événements. Pour une raison quelconque, le gestionnaire d'événements est appelé deux fois.

Voici mon bouton (j'utilise un objet php pour générer le code, c'est pourquoi il y a beaucoup de tags vides):

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

Voici mon gestionnaire d'événements:

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

Ici, je reçois l'alerte deux fois.

J'ai essayé d'appeler la fonction addToCart dans la propriété onclick du bouton, mais si j'essaie de cette façon, j'obtiens cette erreur:

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

J'ai également essayé event.preventDefault () et event.stopPropagation (), et aucun n'a fonctionné.

Des idées sur ce qui se passe, ou sur ce que je peux faire pour l'empêcher de s'exécuter deux fois, ou peut-être pourquoi j'obtiens une erreur si j'appelle la fonction javascript de onclick = ""?

javascriptevent-handlinghtmlbutton
40
Jason247

Peut-être que vous attachez l'événement deux fois sur le même bouton. Ce que vous pouvez faire est de dissocier tous les événements de clic précédemment définis, comme ceci:

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

Cela fonctionne pour tous les événements attachés (mouseover, mouseout, click, ...)

91
Mike Vranckx

Mon événement a été déclenché à deux reprises car j'ai accidentellement inclus les fichiers my_scripts.js et my_scripts.min.js. Assurez-vous de n'en inclure qu'un.

12
user1491819

Annule l’événement du sélecteur et, après l’ajout de l’élément dans le DOM, déclenche à nouveau l’événement sur un sélecteur spécifique .. $ ("nom_sélecteur"). Unbind ("événement"); // Après cet appel à nouveau sur le sélecteur ..

Par exemple:

$( "#button" ).unbind( "click" );

$("#button").click(function(event) {
console.log("button click again);
});
7
user2801665

Pour mémoire, au cas où quelqu'un aurait le même problème, j'avais le même problème. La cause principale était qu'il y avait 3 boutons portant le même identifiant. Après avoir cliqué sur l'un d'eux, les deux autres ont également déclenché leurs événements OnClick ...

6
Gabriel G

Pour moi, j'ai découvert que mes événements n'étaient pas liés à mon composant mappé. La réponse pertinente est à Pourquoi mon onClick est-il appelé lors du rendu? - React.js mais pour vous donner une idée, j'ai copié une partie de la réponse ci-dessous (j'espère que cela aide!):

1. en utilisant .bind

activatePlaylist.bind(this, playlist.playlist_id)

2. en utilisant la fonction flèche

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. ou renvoyer une fonction à partir de activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}
1
Kevin Danikowski

Vous voulez probablement passer à l'événement et ajouter

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
});

OR

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
  return false;
});
0
bosspj