是两个相等的jQuery.on事件绑定了两次

Are two equal jQuery .on events binded twice?

本文关键字：绑定 事件 两次 on 两个 jQuery      更新时间：2023-09-26

假设我们有很多事情要做。我们使用$('body').on('click', '.todo', do_stuff)而不是$('.todo').click(do_stuff)，因此我们只将一个事件侦听器附加到DOM。

然而，我使用的是一个小型MVC。每个待办事项视图都有此代码$('body').on('click', '.todo', do_stuff)。所以，如果我们有20个待办事项，这意味着身体上有20个听众，还是只有一个？他们都会开火吗？

您应该终止上一个事件处理程序：

<script>
    $('body').off('click','.todo', do_stuff);
    $('body').on('click', '.todo', do_stuff);
</script>

在off()函数中包含实际的事件处理程序函数，只会删除该特定的处理程序，而不会删除由相同元素/事件触发的所有其他处理程序。此外，在执行此操作时，请避免使用匿名函数。

目前还建议放弃unbind()和kill()。on() / off()应适合您的所有事件处理需求，包括未来的实时绑定和延迟结果。

如果您执行该代码20次，最终将绑定20个事件处理程序；是的，他们都会开火。

这意味着body有一个监听器，它检查所有点击事件，并检查事件目标的DOM结构，看看它是否包含.todo元素。

无论你有多少.todo元素，身体上永远只有一个监听器。

示例（粗略代码、忽略就绪处理程序等）：

<script>
    $('body').on('click', '.todo', myFunc); 
    // results in 1 handler on the Body, which will be called when each .todo element is clicked
</script>
<body>
    <div class="todo">Foo</div>
    <div class="todo">Bar</div>
    <div class="todo">Baz</div>
</body>
相关文章：