解除绑定后使用绑定

Question

我找到了如下所示的代码。

HTML代码：

<div id="myButton">Click Here</div>

JQuery 代码：

$("#myButton").unbind("click").bind("click",function(){
   alert("Working")
});

在绑定元素之前unbind("click")需要什么？

如果不使用 unbind，它也可以工作。如下图所示

$("#myButton").bind("click",function(){
   alert("Working")
});

哪个最好？有什么区别？

Answer 1

这只是确保没有附加其他click 事件侦听器。因此，您的处理程序将是唯一在单击 #myButton 时采取行动的处理程序

编辑： 作为@T.J. Crowder 在 cmets 中指出，unbind() 不会影响以不同于调用 bind() 的方式附加的处理程序。

另外值得注意的是：

从 jQuery 1.7 开始，.on() 和 .off() 方法更适合在元素上附加和删除事件处理程序

（摘自jQuery.unbind() doc）。其实unbind()is implemented internally通过off()方法）。

考虑：

$("#myButton").bind('click', function () {
  console.log('click 1');
});

$("#myButton").unbind('click').bind('click', function () {
  console.log('click 2');
});

// When clicked, prints "click 2"

对比：

$("#myButton").bind('click', function () {
  console.log('click 1');
});

// note: no unbind here
$("#myButton").bind('click', function () {
  console.log('click 2');
});

// When clicked, prints "clicked 1" followed by "clicked 2"

Answer 2

通过解除对元素的“点击”事件的绑定，您实际上是在移除与该元素关联的所有 onclick 事件。也就是说，如果您的 html 表单的输入字段有一个 onclick 事件并且它调用了一个函数，那么它将是未绑定的。取消绑定后，您将绑定另一个单击事件，该事件将调用该元素的 onclick 函数。

Answer 3

$("#myButton").unbind("click").bind("click",function(){
   alert("Working")
});

jQuery bind() 函数用于将事件处理程序附加到元素，而 unbind() 用于将现有事件处理程序与元素分离。请看演示http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-bind-unbind-example.html

Answer 4

没有这个html代码的url，我不确定#myButtonelement是否附加了其他click处理程序，但可以肯定的是unbind方法删除了这个元素上的所有处理程序，我认为作者只想触发一键事件。 此外，您可以查看浏览器的调试检查器上是否有其他事件处理程序。 希望这会对你有所帮助。