取消注册jQuery中的委托事件

Unregister delegated events in jQuery

本文关键字：事件 注册 jQuery 取消      更新时间：2023-09-26

我们设这个:

<ul>
  <li id="l1">aap</li>
  <li id="l2">noot</li>
  <li id="l3">wim</li>
</ul>
使用jQuery代码: 
$('ul').on('click', 'li', function() {      
  console.log("You clicked on " + $(this).text());
})

我想实现的是:当用户单击其中一个li时，应该关闭仅该li的事件侦听器。

这可以工作，但会删除所有li的侦听器:

$('ul').on('click', 'li', function() {
  console.log("You clicked on " + $(this).text());
  $('ul').off('click');
})

我阅读了jQuery的'on()'和'off()'的文档，但无法将它们结合在一起。

任何想法?

解决方案

为已单击的项添加一个类，并将其排除在处理程序中。

$('ul').on('click', 'li:not(.ignore)', function() {
  console.log("You clicked on " + $(this).text());
  // This adds a class to prevent the handler from hitting again
  $(this).addClass('ignore');      
});

见https://jsfiddle.net/79yp6hpq/3/

<标题> 如果你仔细想想，你看到的行为是有道理的。你告诉它删除'ul'的点击处理程序，它正在处理所有的'li'点击。

通常情况下，你会设置单独的处理程序并在单击时解除绑定，但由于委托事件不能设置为单独的处理程序(据我所知)，我们必须使用一个解决方案。我已经通过添加一个类实现了这一点，但可能还有其他几种方法可以区分已被单击的项。

相关文章：