未将事件绑定到li项之一

Not binding an event to one of li items

本文关键字：li 事件 绑定      更新时间：2023-09-26

我有这个导航条代码

<ul class="left">
  <li><a href="#">First</a></li>
  <li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
      <li><a href="#">First Sub</a></li>
      <li><a href="#">Add</a></li>
    </ul>
  </li>
  <li><a href="#">Add</a></li>
</ul>

这个事件处理程序在js文件

$('ul.left li:not(:last-child), ul.dropdown li:not(:last-child)').click(function(e) {
  e.stopPropagation();
  var ul = this.parentNode;
  ul.removeChild(this);
});

问题:ul中的Add。Left不绑定到单击事件处理程序(它不能根据我的要求)。但是Add在ul中。虽然我已经指定li的最后一个子元素不应该被绑定，但dropdown被绑定到click事件处理程序。因此，它删除了父li项，即'Support'。

问题是你没有一个叫做dropdown的类，你有一个叫做has-dropdown的类，所以ul.dropdown li:not(:last-child)选择器根本不起作用。最重要的是，您的第一个选择器ul.left li:not(:last-child)将覆盖您的内部列表中的所有li元素，因此您还需要将您的第一个选择器更改为类似的内容:ul.left > li:not(:last-child)，以便仅选择li元素是第一个列表的直接后代。

如果你只改变你的js把你的选择器改成:

'ul.left > li:not(:last-child), ul.has-dropdown > li:not(:last-child)'

您需要"直系后代"操作符>来直接在特定的<ul>元素下指定<li>元素。

这里的问题是选择器的这一部分:ul.left li

匹配如下:

0:<li><a href="#">First</a></li>
1:<li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
2:    <li><a href="#">First Sub</a></li>
3:    <li><a href="#">Add</a></li>
    </ul>
  </li>
4:<li><a href="#">Add</a></li>

所以:not(:last-child)只会杀死最后一个li (<li><a href="#">Add</a></li>)

使用ul.left>li，你只会得到匹配:

0:<li><a href="#">First</a></li>
1:<li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
      <li><a href="#">First Sub</a></li>
      <li><a href="#">Add</a></li>
    </ul>
  </li>
2:<li><a href="#">Add</a></li>

你正在寻找的完整选择器是:

'ul.left > li:not(:last-child), ul.dropdown > li:not(:last-child)'

如果我是你，我可能会给add按钮添加一个类。

HTML 

<ul class="left">
  <li><a href="#">First</a></li>
  <li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
      <li><a href="#">First Sub</a></li>
      <li class="add"><a href="#">Add</a></li>
    </ul>
  </li>
  <li class="add"><a href="#">Add</a></li>
</ul>
jQuery 

$('ul.left li:not(.add)').click(function(e) {
  e.stopPropagation();
  var ul = this.parentNode;
  ul.removeChild(this);
});
相关文章：