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

请查看 http://api.jquery.com/bind/。事件绑定方法，例如“click()”、“focus()”等...只是bind(eventtype)的快捷方式，因此阅读bind()文档将让您深入了解如何所有事件绑定都有效。我认为与您的具体问题相关的一点是：

“当事件到达某个元素时，绑定到该元素的该事件类型的所有处理程序都会被触发。”

这意味着如果您将处理程序“function(){alert('Debug'); return false; }”绑定到点击事件 5 次，则所有 5 次都会执行。

作为旁注，绑定到 onclick 处理程序的首选且更现代的方法是完全绕过链接的“onclick”属性，并使用 jQuery 在 DOM 加载上执行所有绑定。这是一个使用更现代的绑定的示例，并且还利用 trigger() 方法在单击 #button1 时触发 #button2 单击处理程序（我认为这就是您在示例中试图实现的目标）：

$(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 不会考虑控件上已绑定的事件，它只会绑定另一个事件。

取消绑定例如：

$('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; });

当然是在文档加载之后。