如何根据选择器更改取消绑定和重新绑定事件

Question

这对我来说更像是一篇关于如何处理绑定到 jQuery 选择器的事件侦听器的学习文章。

假设我有以下代码：

<html>
<div class = "one">one</div>
<div class = "two">two</div>
</html>

<script>
$(".one").click(function() {
$(this).removeClass("one").addClass("two");
console.log("one");
})
$(".two").click(function() {
console.log("two");
})

</script>

第一次单击一个时，选择器不再有效（因为 class 现在是两个而不是一个）。但是事件仍然绑定到这个元素。此元素也不会触发“.two”处理程序，因为它已被绑定。

通过初始单击取消绑定处理程序然后再重新绑定的最简单方法是什么？

Answer 1

绑定document上的事件，无需解绑再绑定

$(document).on("click", ".one", function() {
    $(this).removeClass("one").addClass("two");
    console.log("one");
});

$(document).on("click", ".two", function() {
    console.log("two");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">one</div>
<div class="two">two</div>

Answer 2

$(".one").unbind("click");
$(".one").bind("click", fn);

您可以使用 unbind() 删除使用 bind() 添加的事件 （或像上面那样绑定）

https://jsfiddle.net/7yn7apte/ 不重新绑定

https://jsfiddle.net/7yn7apte/1/ 重新绑定

好了，这就回答了你的问题。但是，您最好使用 on() 和 off() 作为 bind() 调用 on() 和 unbind() 调用 off().

您可以在此处找到更详尽的解释

如何根据选择器更改取消绑定和重新绑定事件

How to unbind and rebind an event based on selector change

javascript

jquery

jquery-events