我有以下HTML結構：註冊列表項的子元素單一的點擊

<li class="is_tab" id="geometry_tab"> 
    <a data-toggle="collapse" href="#geometry_tab_collapse"> 
     <i class="pe-7s-plugin"></i> 
     <p>Geometry 
      <b class="caret"></b> 
     </p> 
    </a> 
    <div class="collapse" id="geometry_tab_collapse"> 
     <ul class="nav"> 
      <li class="is_tab" id="pipe_geometry_tab"><a href="#">Pipe Geometry</a></li> 
     </ul> 
    </div> 
</li>

使用jQuery，我的目標是檢索點擊<li> ID，無論用戶是否點擊li.is_tab，li.is_tab > a，li.is_tab > a > p ，或li.is_tab > a > i。此外，我希望相同的事件處理程序能夠區分#pipe_geometry_tab和#geometry_tab之間的點擊，即當點擊其中一個或另一個時簡單地返回單個正確的ID。

我的問題是這樣的：

考慮下面的代碼片段，

$(<selector>).on("click", function(){...})

是有一個<selector>將在li.is_tab註冊單點擊無論它或它的a，i，或p孩子被點擊？

如果不是，我將不勝感激任何關於如何去做這件事的建議。

PS我已經嘗試了很多東西，但不是與他們膨脹這篇文章，我希望更有經驗的人認爲這有一個明顯的解決方案。

來源

2016-03-18 Mackie Messer

稍偏離主題：通常使用選項卡的索引而不是ID或其他抽象屬性更好。最好不要將你的函數與可以改變的DOM特性緊密結合。 – isherwood

$('li.is_tab').on("click", function(e){...});

^^應該很好地工作，以及任何被點擊的li將被處理。

如果你想這是點擊你可以看看e.currentTarget如果你想看到的是被點擊就可以使用e.target

所以實際的元素，如果你想在li那是的id的li點擊你可以使用e.currentTarget.id

來源

2016-03-18 14:55:01 Neal

啊哈！昨晚我在昏昏欲睡的陰霾中嘗試這種解決方案時，我正在使用'target'，而不是'currentTarget'。優秀。但是，在將ID記錄到控制檯時，單擊'＃pipe_geometry_tab'將打印geometry_tab和pipe_geometry_tab。 –

@MackieMesser可能希望將e.stopPropagation（）添加到事件函數的頂部，否則事件會冒泡到鏈中較高的另一個li。 – Neal

儘管我認爲這個建議可能會解決這個問題，但它似乎也禁用了'的'collapse'功能。我可以吃我的蛋糕，也可以吃嗎？ –

註冊列表項的子元素單一的點擊

我的問題是這樣的：

回答

相關問題