在jQuery

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的侦听器：

$('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'的点击处理程序，该处理程序正在处理所有＆＃39; li＆＃39;点击次数。

通常你会设置单独的处理程序并在点击时取消绑定它们，但由于委派的事件不能设置为单独的处理程序（据我所知），我们必须使用一种解决方法。我通过添加一个类来完成它，但是可能还有其他一些方法可以区分被点击的项目。