Pregunta botón de función de clic disparando dos veces


Tengo un botón que llama a una función de JavaScript usando un controlador de eventos. Por alguna razón, el controlador de eventos se llama dos veces.

Aquí está mi botón (estoy usando un objeto php para generar el código, es por eso que hay muchas etiquetas vacías):

<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>

Aquí está mi controlador de eventos:

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

Aquí, recibo la alerta dos veces.

Intenté llamar a la función addToCart en la propiedad onclick del botón, pero si lo intento de esa manera, aparece este error:

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

También probé event.preventDefault () y event.stopPropagation (), y ninguno funcionó.

¿Alguna idea de por qué sucede esto, o qué puedo hacer para evitar que se ejecute dos veces, o quizás por qué recibo un error si llamo a la función javascript desde onclick = ""?


33
2017-11-18 18:18


origen


Respuestas:


Tal vez estás adjuntando el evento dos veces con el mismo botón. Lo que podría hacer es desvincular cualquier evento de clic configurado previamente como este:

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

Esto funciona para todos los eventos adjuntos (mouseover, mouseout, click, ...)


73
2017-11-18 18:20



Mi evento se disparó dos veces porque accidentalmente incluí mis my_scripts.js AND my_scripts.min.js. Asegúrese de incluir solo uno.


9
2018-01-23 23:51



Desvincular el evento del selector y luego de anexarlo en el elemento en DOM, de nuevo activa el evento en un selector específico. $ ("selector_name"). unbind ("evento"); // Después de este evento de llamada en el selector nuevamente ...

Por ejemplo:

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

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

6
2018-06-16 12:07



Solo para el registro en caso de que alguien más tenga el mismo problema, tuve el mismo problema, la causa principal fue que había 3 botones con la misma ID, después de hacer clic en uno, los otros dos también activaron sus eventos OnClick ...


5
2017-07-07 21:39



Para mí, descubrí que mis eventos no estaban vinculados a mi componente asignado. La respuesta relevante es a ¿Por qué mi onClick es invocado en render? - React.js pero para proporcionar algunas ideas he copiado parte de la respuesta a continuación (¡Espero que esto ayude!):

1. usando .bind

activatePlaylist.bind(this, playlist.playlist_id)

2. usando la función de flecha

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

3. o función de retorno desde activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

1
2017-10-17 15:05



Probablemente quiera pasar en el evento y agregar

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

O

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

0
2017-11-18 18:22