Question

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

<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>

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

$(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）似乎由于某种原因不起作用？

由于

Answer 1

它也会触发子列表，因为您没有指定它应从哪个ul开始。子列表具有相同的结构，因此也有资格选择。

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

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

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

Answer 2

试试这个，

每次都不必使用（文件）.ready。
为什么“开”，只是绑定 “点击”并阅读何时使用“开启”here

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

jQuery Selector只在第一级不工作？

2 个答案: