仅在第一个级别的jQuery选择器不起作用

Question

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

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

我只想在用户在第一个级别上单击列表元素，但第二次单击列表元素时才会调用函数。关于文档和Google，使用"＆gt;在选择器中：

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

但是，正如您在JSFIDDLE上看到的那样

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

尝试这个，

• 不必使用（文档）。每次都准备就绪。
• 为什么"在"上，只需绑定"单击"并在此处阅读"何时使用"

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