Question

我希望在单击外部列表的li时触发事件。我已经为它编写了一个函数，但即使单击内部列表li，事件也会被触发。请帮忙。

我有以下HTML结构：

  <ul class="nav nav-pills nav-stacked" id="outer-menu">
     <li id="R1"><a href="#">Sample Reports</a>
          <ul class="nav nav-pills nav-stacked" id="inner-menu">
        <li><a href="#">Employee salary report</a></li>
        <li><a href="#">Car sales Report</a></li>
        <li><a href="#">Business client report</a></li>
        </ul>
     </li>
    </ul>

和jquery：

$(document).ready(function() {
    $('#outer-menu a').on('click',function(){
        alert("this clicked");
    });
});

Answer 1

您可以使用以下内容将匹配集限制为仅指导儿童：

$('#outer-menu > li > a').on('click',function() {
    ...
});

Answer 2

尝试

$('#outer-menu li a').on('click',function(){
    alert("this clicked");
});

甚至尝试

$('#outer-menu #R1 a').on('click',function(){
    alert("this clicked");
});

Answer 3

您只需要定位直接子项，并且您还可以停止事件传播/冒泡（此处您在点击事件中使用了警报，但如果稍后使用动画，则需要停止动画传播），所以您可以使用以下代码：

    $(document).ready(function(){
      $('#outer-menu > li > a').on('click',function(){
        alert("this clicked");
      }).stop(true, true);
    });

仅在单击外部li时才会触发的事件

3 个答案: