jQuery嵌套李单击事件调用多次 [英] jquery nested li click event calls multiple times

问题描述

我具有以下结构.

<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中 我有以下功能.

In js I have the following function.

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


});

当我单击li文件2.1.1时. 该函数调用3次

When I clicked on li File 2.1.1. The function calls 3 times

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

first time for li File 2.1.1 , second time for li Subfolder 2.1 and third time for li Folder 2.

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

Can anyone give me the solution to call the function exactly once?

非常感谢您的帮助. 谢谢.

Your Help is greatly Appriciated. Thanks.

推荐答案

这是因为在#broswer下有很多 li个元素.

That is because you have many li elements under #broswer.

尝试以下方法:

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

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

Or you can use event.stopPropagation():

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

这篇关于jQuery嵌套李单击事件调用多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！