Кнопка onclick активируется дважды

У меня есть кнопка, которая вызывает функцию 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 = ""?

Ответ 1

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

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

Это работает для всех подключенных событий (mouseover, mouseout, click,...)

Ответ 2

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

Ответ 3

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

Например:

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

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

Ответ 4

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

Ответ 5

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

1., используя .bind

activatePlaylist.bind(this, playlist.playlist_id)

2., используя функцию стрелки

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

3. или вернуть функцию из списка активирования.

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

Ответ 6

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

$('.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;
});

Ответ 7

.unbind() устарела, и вы должны использовать метод .off(). Просто позвоните .off() прямо перед вызовом .on().

Это удалит все обработчики событий:

$(element).off().on('click', function() {
    // function body
});

Чтобы удалить только зарегистрированные обработчики событий click

$(element).off('click').on('click', function() {
    // function body
});

Ответ 8

Просто позвоните .off() прямо перед вызовом .on().

Это удалит все обработчики событий:

$(element).off().on('click', function() {
    // function body
});

Чтобы удалить только зарегистрированные обработчики событий click

$(element).off('click').on('click', function() {
    // function body
});