jQuery .click продолжает добавлять к событию, а не заменять его

Question

У меня следующий кодовый блок :

function testJQueryClick(){
     $('#button2').click(function(){ alert ('Debug'); return false; });       
}

Когда я вызываю функцию один раз (а затем нажимаю на кнопку 2), я получаю ожидаемое предупреждение.Когда я вызываю ту же функцию во второй раз, а затем нажимаю кнопку 2, я получаю два предупреждения, в третий раз - три и т. Д. JQuery, похоже, каждый раз добавляет событие .click вместо его замены.

Я ожидал бы, что обработчик .click будет заменен каждый раз, когда я его вызываю.В документации jQuery я не могу найти ничего, что подтверждает это как ожидаемое поведение или нет.

Answer 1

Сначала вы захотите off избавиться от старого прослушивателя событий:

function testJQueryClick () {
    $('#button2').off('click').on('click', function () {
        alert ('Debug');

        return false;
    });      
}

См. Это в ручке в действии .

Answer 2

Ознакомьтесь с документацией для метода bind () по адресу http://api.jquery.com/bind/. Методы привязки событий, такие как «click ()», «focus ()» и т. Д., - это всего лишь ярлыки для bind ( eventtype ), поэтому, читая документацию bind (), вы поймете, как работает связывание всех событий.Я думаю, что бит, который относится к вашей конкретной проблеме:

"Когда событие достигает элемента, запускаются все обработчики, связанные с этим типом события для элемента."

Значение, если вы связываетеобработчик "function () {alert ('Debug'); return false;}" к событию click 5 раз, все 5 будут выполнены.

В качестве идентификатора, предпочтительный и более современный способ привязки кОбработчик onclick должен полностью обойти атрибут «onclick» ссылки и выполнить все ваши привязки при загрузке DOM с помощью jQuery.Вот пример, который использует более современные привязки, а также использует метод trigger () для запуска обработчика нажатия кнопки # button2 при нажатии кнопки # button1 (чего, я думаю, вы пытались достичь в своем примере):

$(document).ready(function() {
    $('#button2').click(function(){ alert ('Debug'); return false; });  // Bind alert to #button2 click
    $('#button1').click(testJQueryClick);                                           // Bind testJQueryClick() to #button1 click
});

function testJQueryClick(e) {
    $('#button2').trigger('click'); // Trigger #button2 click handler
}

Answer 3

при связывании события jquery не учитывает, какие события уже связаны с элементом управления, он просто связывает еще одно событие ..

unbind, например:

$('selector').unbind("eventType");

вы можете использовать unbind API, чтобы сначала удалить связанное событие или, если это тот же обработчик события щелчка, но вы вызываете его несколько раз, так как новый элемент управления с тем же селектором был вставлен в DOM, тогда вам, вероятно, следует рассмотреть использование live API..

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

Answer 4

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

Начиная с jQuery 1.7, предпочтительным способом является использование off . (unbind устарело с jQuery 3)

Например:

function testJQueryClick(){
    $('#button2').off('click').click(function(){alert ('Debug'); return false;});       
}

Answer 5

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

$('#button2').click(function(){ alert ('Debug'); return false; });

После загрузки документа, конечно.