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

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

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

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

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

Ответ 1

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

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

        return false;
    });      
}

Посмотрите его в ручке в действии.

Ответ 2

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

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

Значение, если вы привязываете функцию обработчика() {alert ('Debug'), возвращаете 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
}

Ответ 3

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

unbind, например:

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

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

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

Ответ 4

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

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

Например:

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

Ответ 5

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

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

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