javascript - 在 jQuery 中取消注册委托(delegate)事件

Question

假设我有这个:

<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()”的文档，但无法将它们放在一起。

有什么想法吗？

Answer 1

解决方案

向单击的项目添加一个类，并在处理程序中排除这些项目。

$('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”点击。

通常，您会设置单独的处理程序并在单击时取消绑定(bind)它们，但由于委托(delegate)事件不能设置为单独的处理程序(无论如何，据我所知)，我们必须使用解决方法。我通过添加一个类来完成此操作，但可能还有其他几种方法可以区分已单击的项目。