jquery嵌套li點擊事件調用多次

我有以下結構。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>

在js 我有以下功能。

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


});

當我點擊li文件2.1.1。該函數調用3次

第一時間裏的文件2.1.1，第二次黎子文件夾2.1次，第三次爲裏夾2.

誰能給我解決調用函數恰好一次？

您的幫助是非常appriciated。謝謝。

來源

2012-06-20 Hardik Patel

那是因爲你有很多li元素在#broswer下。

試試這個：

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

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

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

來源

2012-06-20 16:21:30 Neal

您正確在#browser>裏是#browser的直接孩子，但那就意味着任何#browser> LI>裏不會是叫什麼名字？ – AbstractChaos

@AbstractChaos準確地說，但所有其他'li'都在'＃browser'的直接子節點內 – Neal

但是如果例如OP確實點擊了file.2.1.1這是$ browser> li> li> li那麼它不會開火？，我會猜你會在泡沫上看到它。取決於要求的有用性 – AbstractChaos

你的函數改爲

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

});

這樣一來，對下級li點擊將不會「冒泡」到更高層次li。

來源

2012-06-20 16:22:32

這是由於這一事實，事件的「泡沫」你的DOM，所以你如果你點擊

文件2.1.1，它也可以通過文件2.1聽取和文件2這種變化事件固定到

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

來源

2012-06-20 16:22:49 AbstractChaos

而不是使用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>

來源

2015-10-04 02:18:29 user2990719

jquery嵌套li點擊事件調用多次

回答

相關問題