Question

如果使用以下代码：

$("#element").on('click', function(){
   alert("clicked!");
});

$("#element").on('click', function(){
   alert("clicked!");
});

众所周知，click事件将触发两次。因为它与方法on()绑定，并且没有与off()取消绑定。

现在我的问题是

为什么在这个page点击事件方法只注册一次，无论你点击绑定按钮多少次？

<script>
function flash() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});
</script>

我认为这是因为on()方法绑定到命名函数而不是匿名函数。但是我在jsbin here 上测试了它并且它失败了？任何人都能给我一些我在这里缺少的东西吗？

Answer 1

实际上已经注册并调用了click方法几次，但是几个事件处理程序中的每一个都执行相同的操作，即淡出按钮。您在视觉上无法注意到多个调用，因为多个“fadings”同步发生（quasi-）（由内部计时器控制），即jQuery不会等到按钮完全消失后再继续执行程序。当按钮仍然可见时，将调用第二个处理程序。

如果注册了多个相同的处理程序，则只需一次调用off()即可将所有删除。如果您在自己的示例末尾添加$("#b").off ('click', doIt)，则会看到您的按钮不再执行任何操作。

  $("#b").on('click', doIt);

  $("#b").on('click', doIt);

  $("#b").on('click', doIt);

  $("#b").on('click', doIt);

  $("#b").off('click', doIt); // removes all event handlers that are equal (===) to doIt

  // hence now no event handler is registered to #b anymore

Answer 2

请看这个例子：JSFiddle。与jQuery文档中的代码相同，但修改很少：

function flash() {
    $("div").show().fadeOut("slow");
    alert('hi');
}

它显示on的工作原理 - 与您描述的完全相同。在文档中由click函数调用时不显示多个绑定。然后off关闭所有已分配的点击处理程序。

关于点击事件绑定的jQuery

2 个答案: