0

Кнопка onclick срабатывает дважды

29

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

5 ответ(ов)

1

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

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

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

0

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

$('.addToCartButton').click(function(e) {
  e.preventDefault(); // Добавлено это
  alert("bob");
  // addToCart($(this).attr("id"));
});

ИЛИ

$('.addToCartButton').click(function(e) {
  e.preventDefault(); // Добавлено это
  alert("bob");
  // addToCart($(this).attr("id"));
  return false;
});

Оба варианта предотвращают стандартное поведение ссылки или кнопки, что позволяет вам выполнить дополнительные действия, например, добавить товар в корзину.

0

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

0

Для того чтобы отвязать событие от селектора и затем снова привязать его после добавления элемента в DOM, вы можете использовать метод .off() для отвязывания и .on() для привязки события. Ваш пример можно переписать следующим образом:

// Отвязываем событие click от кнопки с id "button"
$("#button").off("click");

// Привязываем снова событие click к кнопке
$("#button").on("click", function(event) {
    console.log("button clicked again");
});

Важно отметить, что метод .unbind() устарел, и рекомендуется использовать .off() для отвязывания событий. Таким образом, после вызова .off() событие будет отключено, а после вызова .on() оно будет снова активно.

Если вы добавляете элемент в DOM заново, не забудьте применить привязку событий после его добавления.

0

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

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь