кнопка onclick функция стрельба дважды

Question

У меня есть кнопка, которая вызывает функцию javascript с помощью обработчика событий. По какой-то причине обработчик события вызывается дважды.

Вот моя кнопка (я использую объект PHP для генерации кода, поэтому есть много пустых тегов):

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

Вот мой обработчик события:

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

Здесь я получаю предупреждение дважды.

Я попытался вызова функции AddToCart в OnClick собственности на кнопки, но если я пытаюсь это таким образом, я получаю эту ошибку:

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

Я также попытался event.preventDefault() и event.stopPropagation(), и никто не работал.

Любые идеи, почему это происходит, или что я могу сделать, чтобы он не выполнялся дважды, или, может быть, почему я получаю сообщение об ошибке, если я вызываю функцию javascript из onclick = ""?

Answer 1

Возможно, вы прикрепляете событие дважды на одной и той же кнопке. Что вы можете сделать, это отвязать все ранее установленные клики события, как это:

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

Это работает для всех подключенных событий (Mouseover, MouseOut, нажмите кнопку, ...)

Answer 2

Вы, вероятно, хотите, чтобы пройти в случае и добавить

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

ИЛИ

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

Answer 3

Мое событие стрельбы два раза, потому что я accide ntally включил оба my_scripts.js AND my_scripts.min.js. Убедитесь, что вы включили только один.

Answer 4

Отключить событие от селектора и после добавления в элемент в DOM снова активировать событие на конкретном селекторе .. $ ("selector_name"). Unbind ("event"); // После этого вызова события на селекторе снова ..

Например:

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

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

Answer 5

Просто для записи в случае, если кто-то еще с той же проблемой, у меня была такая же проблема, основная причина в том, что там были 3 кнопки с одинаковым идентификатором, после того, как он нажал один, два других также выпустили свои события OnClick ...

Answer 6

Для меня я узнал, что мои события не привязаны к моему отображаемому компоненту. Соответствующий ответ на Why is my onClick being called on render? - React.js, но предоставить некоторые идеи я скопировал некоторые из ответа ниже (Надеюсь, что это помогает!):

1. использованием .bind

activatePlaylist.bind(this, playlist.playlist_id) 

2. с помощью функции стрелка

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

3. или возврата функции из activatePlaylist

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