jQuery 选择器仅在第一级不起作用？答案

【问题标题】：jQuery Selector only on first level not working?jQuery 选择器仅在第一级不起作用？
【发布时间】：2014-02-15 13:54:55
【问题描述】：

我有一个带有子列表的简单列表

<div id="master">
<ul>
    <li><div>Trigger Me!</div></li>
    <li><div>Trigger Me!</div></li>
    <li><div>Trigger Me!</div>
        <ul>
            <li><div>Do NOT trigger me</div></li>
            <li><div>Do NOT trigger me</div></li>
        </ul>
    </li>
</ul>

我只想在用户点击第一级的列表元素时调用一个函数，但在第二级时NOT。关于文档和谷歌，使用选择器中的“>”应该很容易：

$(document).ready(function(){
  $("div#master").on("click", "ul > li", function (){
    alert($(this).text());
  });
});

但正如您在 JSFiddle http://jsfiddle.net/kQH4x/ 上看到的那样，当单击子列表项时，它也会触发触发器。

stackoverflow 上的答案有一个类似的问题（请参阅此处 https://stackoverflow.com/a/977891/1099519 ）由于某种原因似乎不起作用？

谢谢

【问题讨论】：

标签： jquery jquery-selectors jquery-trigger

【解决方案1】：

试试这个，

不必每次都使用 (document).ready。
为什么是“on”，只是绑定 “点击”并阅读何时使用“开”here

  $(function(){
       $("div#master > ul>li>div").click(function (){
          alert($(this).text());
       });
    });

【讨论】：

这是一个来自页面的代码 sn-p，它对动态内容使用“加载”方法，这就是为什么我必须使用“打开”事件

【解决方案2】：

它也会在子列表上触发，因为您没有指定它应该从哪个 ul 开始。子列表具有相同的结构，因此也符合选择器的条件。

要解决此问题，请将主列表父元素添加到选择器，因此：

$(document).ready(function(){
   $("div#master").on("click", ">ul>li>div", function (){
      alert($(this).text());
   });
});

小提琴：http://jsfiddle.net/kQH4x/6/

【讨论】：