Question

我有the following code block：

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

当我调用该函数一次（然后单击按钮2）时，我会收到预期的警报。当我第二次调用相同的函数然后单击按钮2时，我得到两个警报，第三次我得到三个，等等.jQuery似乎每次都附加.click事件，而不是替换它。

每次调用它时，我都希望.click处理程序被替换。我在jQuery documentation中找不到任何确认这是预期行为的内容。

Answer 1

您需要先调用off摆脱旧的事件监听器：

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

        return false;
    });      
}

See it in the Pen in action

Answer 2

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

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

这意味着如果将处理程序“function（）{alert（'Debug'）; return false;}”绑定到click事件5次，则所有5将执行。

作为旁注，绑定到onclick处理程序的首选和更现代的方法是完全绕过链接的“onclick”属性，并使用jQuery在DOM加载上执行所有绑定。这是一个使用更多现代绑定的示例，并且在单击＃button1时使用trigger（）方法触发＃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。（从{jQuery 3开始不推荐使用unbind）

例如：

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

Answer 5

这是因为每次分配新的点击处理程序。它应该是这样的：

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

文档加载后当然。

jQuery .click不断添加到事件中，而不是替换它

5 个答案: