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

我有以下结构

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

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

第一次用于li文件2.1.1，第二次用于li子文件夹2.1，第三次用于li文件夹2

有没有人能给我一个方法来精确调用函数一次

非常感谢你的帮助。

---

谢谢。

那是因为在

\broswer

下有许多

元素

请尝试以下方法：

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

或者您可以使用：

---

将您的函数更改为

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

});

---

这样，单击较低级别的

li

就不会“冒泡”到较高级别的

li

这是由于事件会“冒泡”到dom，因此如果单击

文件2.1.1，文件2.1和文件2也将听取意见，以修复此更改事件

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

---

不要在li对象上使用单击事件，而是添加另一个元素（在示例span中）并在该元素中处理单击。这种方法仍然可以为更高的事件冒泡，只是不能通过嵌套的li冒泡

//运行以下命令以查看无li气泡结果
$（“.nobobble”）。在（'click'，function（）上{
$（“#结果”）.append（$（this.attr（“数据id”）+“
”）
});
//取消注释以下内容以查看li气泡结果
/*$（“.bubble”）。在（'click'，function（）上{
$（“#结果”）.append（$（this.attr（“数据id”）+“
”）
});*/


a

b




你的正确答案是#browser>li是#browser的直接子代，但这意味着任何#browser>li>li都不会被称为？@AbstractChaos确切地说，但是所有其他的
li
都在
browser
的直接子代中，但是，例如，如果OP确实单击文件.2.1.1，即$browser>li>li>li>li，那么它就不会被触发？，我想你会在泡泡时抓住它的。取决于对产品有用性的要求that@AbstractChaos是的，这一切都会被顶端的
li
元素捕捉到：-），但在现实生活中，OP可能希望能够检查单击的元素并找出用户所指的文件；我认为，如果在最低级别的元素上没有特定的点击事件，这将无法正常工作。对我来说，使用stopPropagation似乎是一个更好的解决方案。
$("#browser li").click(function(event){
   event.stopPropagation();
   //do your other stuff

});

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