Question

我有以下结构。

<ul id="browser" class="filetree">

        <li><span class="folder">Folder 1</span>

            <ul>

                <li><span class="file">Item 1.1</span></li>

            </ul>

        </li>

        <li><span class="folder">Folder 2</span>

            <ul>

                <li><span class="folder">Subfolder 2.1</span>

                    <ul id="folder21">

                        <li><span class="file">File 2.1.1</span></li>

                        <li><span class="file">File 2.1.2</span></li>

                    </ul>

                </li>

                <li><span class="file">File 2.2</span></li>

            </ul>

        </li>

        <li class="closed"><span class="folder">Folder 3 (closed at start)</span>

            <ul>

                <li><span class="file">File 3.1</span></li>

            </ul>

        </li>

        <li><span class="file">File 4</span></li>

    </ul>

在js 我有以下功能。

$("#browser li").click(function(){


});

当我点击li File 2.1.1时。该函数调用3次

第一次为li文件2.1.1，第二次为li子文件夹2.1，第三次为li文件夹2。

任何人都可以给我一个解决方案来调用该函数一次吗？

您的帮助非常贴心。感谢。

Answer 1

这是因为li下有多个 #broswer元素。

请改为尝试：

$("#browser>li").click(function(){
    //only direct children of #browser
    //your code
});

或者您可以使用event.stopPropagation()：

$("#browser li").click(function(event){
    event.stopPropagation();
    //your code
});

Answer 2

将您的功能更改为

$("#browser li").click(function(event){
   event.stopPropagation();
   //do your other stuff

});

这样，较低级别li上的点击不会“冒泡”到较高级别li。

Answer 3

这是因为事件“冒泡”你的dom所以如果你点击

文件2.1.1，文件2.1和文件2也会听到它将此更改事件修复为

$("#browser li").click(function(e){
  //Your code here
  e.stopPropagation();
});

Answer 4

不是在li对象上使用click事件，而是添加另一个元素（在示例范围内）并处理单击。对于较高的事件，这种方式仍然可以冒泡，只是不会通过嵌套的li冒泡。

//Run the following to see the no li bubble result 

$(".nobubble").on('click',function(){
    $("#result").append($(this).attr("data-id") +"<br />")
   });

//uncomment the following to see the li bubble result
/*$(".bubble").on('click',function(){
    $("#result").append($(this).attr("data-id") +"<br />")
   });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="bubble" data-id="li-a"><span  class="nobubble" data-id="span-a">a</span>
    <ul>
      <li class="bubble" data-id="li-b"><span class="nobubble" data-id="span-b">b</span>
      </li>
    </ul>
  </li>
</ul>

<div id="result">
</div>

jquery嵌套li多次单击事件调用

4 个答案: