bouton onclick fonction mise à feu deux fois
j'ai un bouton qui appelle une fonction javascript en utilisant un gestionnaire d'événements. Pour une raison quelconque, le gestionnaire d'événement 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 balises 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 aussi essayé l'événement.preventDefault () et event.stopPropagation(), et aucune n'a fonctionné.
une idée de la raison pour laquelle cela se produit, ou de ce que je peux faire pour l'empêcher d'exécuter deux fois, ou peut-être pourquoi je reçois une erreur si j'appelle la fonction javascript de onclick=""?
6 réponses
peut-être que vous attachez l'événement deux fois sur le même bouton. Ce que vous pouvez faire est de défaire n'importe quel clic précédemment défini événements comme ceci:
$('.addToCartButton').unbind('click').click(function() {
alert("bob");
//addToCart($(this).attr("id"));
});
Cela fonctionne pour tous les événements attachés (mouseover, mouseout, cliquez sur, ...)
mon événement a été tiré deux fois parce que j'ai accidentellement inclus les deux my_scripts.js et my_scripts.min.js. Vous assurer que vous ne comprennent qu'une.
déboîter l'Événement du sélecteur et après avoir ajouté l'élément dans le DOM déclencher à nouveau l'événement sur le sélecteur spécifique.. $("selector_name").unbind( "événement" ); //Après cet événement d'appel sur le sélecteur de nouveau..
par exemple:
$( "#button" ).unbind( "click" );
$("#button").click(function(event) {
console.log("button click again);
});
juste pour information au cas où quelqu'un d'autre aurait le même problème, j'ai eu le même problème, la cause fondamentale était qu'il y avait 3 boutons avec le même ID, après avoir cliqué sur l'un, les deux autres ont aussi tiré leurs évènements OnClick...
pour moi, j'ai découvert que mes événements n'étaient pas liés à ma composante cartographiée. La réponse pertinente est . Pourquoi mon onClick est-il appelé sur render? - Réagir.js mais pour fournir quelques idées j'ai copié une partie de la réponse ci-dessous (espérons que cela aide!):
1. à l'aide .lid
activatePlaylist.bind(this, playlist.playlist_id)
2. utilisant la fonction Flèche
onClick={ () => this.activatePlaylist(playlist.playlist_id) }
3. "151990920 ou de retour de la fonction de activatePlaylist
activatePlaylist(playlistId) {
return function () {
// you code
}
}
vous voulez probablement passer dans l'événement et ajouter
$('.addToCartButton').click(function(e) {
e.preventDefault(); //Added this
alert("bob");
//addToCart($(this).attr("id"));
});
ou
$('.addToCartButton').click(function(e) {
e.preventDefault(); //Added this
alert("bob");
//addToCart($(this).attr("id"));
return false;
});