Javascript 在jQuery中注销委派事件

假设我有这个：

<ul>
  <li id="l1">aap</li>
  <li id="l2">noot</li>
  <li id="l3">wim</li>
</ul>

我想实现的是：当用户单击某个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');      

});

看

解释 如果你仔细想想，你看到的行为是有道理的。您告诉它删除处理所有“li”点击的

'ul'

点击处理程序

通常，您会设置单独的处理程序并在单击时解除绑定，但由于委派事件不能设置为单独的处理程序（据我所知），因此我们必须使用变通方法。我通过添加一个类来实现这一点，但可能还有其他几种方法可以区分单击的项目。

解决方案 将类添加到单击的项并排除处理程序中的项

$('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');      

});

看

解释 如果你仔细想想，你看到的行为是有道理的。您告诉它删除处理所有“li”点击的

'ul'

点击处理程序

---

通常，您会设置单独的处理程序并在单击时解除绑定，但由于委派事件不能设置为单独的处理程序（据我所知），因此我们必须使用变通方法。我通过添加一个类来实现这一点，但可能还有其他几种方法可以区分单击的项目。

只需为每个单击的li添加一个属性，这样它就不会被处理两次。只需为每个单击的li添加一个属性，这样它就不会被处理两次。不幸的是，这不起作用，请参见此提琴：。我假设这不起作用，因为正式没有为'li'注册事件，只有封装的'ul'是的，结果证明jQuery不够聪明，无法弄清楚我们在这里要做什么。我已经做了一个小的变通办法，但应该做的技巧。请参阅更新的答案。不幸的是，这不起作用，请参阅此提琴：。我假设这不起作用，因为正式没有为'li'注册事件，只有封装的'ul'是的，结果证明jQuery不够聪明，无法弄清楚我们在这里要做什么。我已经做了一个小的变通办法，但应该做的技巧。请参阅更新的答案。