Кнопка 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=""?
5 ответ(ов)
Возможно, вы привязываете событие дважды к одной и той же кнопке. Вы можете удалить все предыдущие обработчики клика с помощью следующего кода:
$('.addToCartButton').unbind('click').click(function() {
alert("bob");
//addToCart($(this).attr("id"));
});
Этот подход сработает для всех прикрепленных событий (mouseover, mouseout, click и других).
Вы, вероятно, хотите передать событие и добавить
$('.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;
});
Оба варианта предотвращают стандартное поведение ссылки или кнопки, что позволяет вам выполнить дополнительные действия, например, добавить товар в корзину.
Проблема с тем, что ваше событие срабатывало дважды, могла возникнуть из-за того, что вы случайно добавили оба файла my_scripts.js и my_scripts.min.js. Убедитесь, что вы включаете только один из них. Это поможет избежать дублирования событий.
Для того чтобы отвязать событие от селектора и затем снова привязать его после добавления элемента в 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 заново, не забудьте применить привязку событий после его добавления.
На всякий случай, если у кого-то возникнет такая же проблема, у меня была аналогичная ситуация. Коренная причина заключалась в том, что у меня было три кнопки с одинаковым ID. После нажатия на одну из них остальные две также вызывали свои события OnClick...
Потеряно HTML-кодирование при чтении атрибута из поля ввода
jQuery/JavaScript: Замена битых изображений
Предварительный просмотр изображений перед загрузкой
Как создать WYSIWYG-редактор на HTML/JS? [закрыто]
Как выполнить код после сброса HTML-формы с помощью jQuery?