javascript - hacer - botón de función de clic disparando dos veces

llamar funcion javascript html sin evento

Question

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 = ""?

Answer 1

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, ...)

Answer 2

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;
});

Answer 3

Desenlazar evento del selector y después de agregarlo en el elemento en DOM, de nuevo desencadenar evento en el 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);
});

Answer 4

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

Answer 5

Para mí, descubrí que mis eventos no estaban vinculados a mi componente asignado. La respuesta relevante es ¿Por qué se llama mi onClick 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 
  }
}

Answer 6

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