Событие jQuery Button.click() запускается дважды

У меня есть следующая проблема с этим кодом:

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

Если я нажму на эту кнопку, предупреждение появится два раза. Это не только с этой конкретной кнопкой, но и с каждой отдельной кнопкой, которую я создаю.

Что я делаю неправильно?

Ответ 1

Ваш текущий код работает, вы можете попробовать его здесь: http://jsfiddle.net/s4UyH/

У вас есть что-то за пределами примера, запускающее другое .click(), проверьте другие обработчики, которые также запускают событие click для этого элемента.

Ответ 2

В этом случае мы можем сделать следующее

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

У меня было событие, срабатывающее два раза изначально, когда страница обновилась, она срабатывает четыре раза. Это было после многих бесплодных часов, прежде чем я выяснил поиск в Google.

Я также должен сказать, что исходный код работал до тех пор, пока я не начал использовать виджет аккордеона JQueryUI.

Ответ 3

Странное поведение, которое я испытал также. Поэтому для меня "return false" сделал трюк.

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });

Ответ 4

Если вы используете

$( document ).ready({ })

или

$(function() { });

несколько раз функция щелчка запускается столько раз, сколько используется.

Ответ 5

вы можете попробовать это.

    $('#id').off().on('click', function() {
        // function body
    });
    $('.class').off().on('click', function() {
        // function body
    });

Ответ 6

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

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

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

Ответ 7

$("#id").off().on("click", function() {

});

Работал на меня.

$("#id").off().on("click", function() {

});

Ответ 8

Я обнаружил, что привязка элемента element.click к функции, которая происходит более одного раза, будет стоять в очереди, поэтому в следующий раз, когда вы нажмете на нее, она будет запускаться столько раз, сколько была выполнена функция привязки. Ошибка новичка, вероятно, на моем конце, но я надеюсь, что это поможет. TL, DR: убедитесь, что вы привязываете все клики к функции настройки, которая выполняется только один раз.

Ответ 9

Точно так же, как Ник пытается сказать, что-то извне вызывает событие дважды. Чтобы решить эту проблему, вы должны использовать event.stopPropagation(), чтобы предотвратить родительский элемент.

$('button').click(function(event) {
    event.stopPropagation();
});

Надеюсь, это поможет.

Ответ 10

в моем случае я использовал команду изменения следующим образом

$(document).on('change', '.select-brand', function() {...my codes...});

а потом я изменил способ

$ ('. select-brand'). on ('change', function() {... мои коды...});

и это решило мою проблему.

Ответ 11

Это также может быть вызвано наличием input и label внутри элемента с прослушивателем щелчков.

Вы нажимаете на label, которая вызывает событие щелчка, а также другое событие щелчка на input для label. Оба события связаны с вашей стихией.

Посмотрите на эту ручку причудливого переключателя только для CSS: https://codepen.io/stepanh/pen/WaYzzO

Примечание: это не специфично для jQuery, нативный слушатель запускается 2 раза, как показано на рисунке.

Ответ 12

Это часто происходит, когда вы эффективно включаете скрипт в шаблон более одного раза.

Либо вы включили скрипт более одного раза в один и тот же HTML файл
Вы уже добавили прослушиватель событий, используя атрибут onclick для элемента
Если вы используете template inheritance как extends в django, скорее всего, вы включили скрипт в более чем один файл, который объединен с помощью include или extend
Событие всплывает до некоторого родительского элемента.

Таким образом, вы должны либо найти их и удалить дубликаты импорта. Это лучшее, что можно сделать.

Другое решение состоит в том, чтобы сначала удалить все прослушиватели событий click в сценарии, например:

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

Вы можете пропустить event.stopPropagation(); если вы уверены, что событие не вспыхнуло.

Ответ 13

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