• Geek asks and answers

    Jquery nested click click click click calls multiple times

    I have the following structure.

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

    In js I have the following function.

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


});

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

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

    Can someone give me a solution to call the function exactly once?

    Your help is very helpful. Thank.

    +5
    source share
    4 answers

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

    Try this instead:

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

    Or you can use event.stopPropagation():

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

    Change your function to

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

});

    , li "" li.

    +4

    This is due to the fact that events “bubble” over your home, so you, if you click

    File 2.1.1, it will also be heard in files 2.1 and file 2 to fix this change event

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

    Instead of using the click event on the li object, add another element (in the span example) and click on it. This mode can still bubble for higher events, it just doesn't bubble through nested 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>
    Run codeHide result
    0
    source

    More articles:


    All Articles