在列表

Question

我在HTML列表的樹的樹添加一個點擊事件列出的項目，如本：

<ul class="myTree"> 
    <li class="treeItem">Category 1 
     <ul> 
      <li class="treeItem">Subcategory 1 1</li> 
      <li class="treeItem">Subcategory 1 2 
       <ul> 
        <li class="plus"><input type="text" value="Add a product"/></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="treeItem">Category 2 
     <ul> 
      <li class="treeItem">Subcategory 1 1</li> 
      <li class="treeItem">Subcategory 1 2 
       <ul> 
        <li class="plus"><input type="text" value="Add a product"/></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

因此，大家可以看到，這是一個有點闡述名單。

現在我需要的是那些會檢索相應名稱（類別1，子類別11等）的那些「treeItem」類元素上的單擊事件。

我想出了這一點：

$(".myTree").on("click", ".treeItem", function() { 
    var categoryName = $(this).text(); 
    alert(categoryName); 
}); 

我面對現在唯一的問題是，首先，categoryName包含

Category 2 

       Subcategory 1 1 
       Subcategory 1 2 

當我點擊「等級1」 <li>（如類別1）。我可以通過在我的<li>中添加一些catname屬性來避開這個問題，但最重要的是，當我點擊「2級」<li>（例如子類別11）時，它會首先在級別2上觸發點擊事件<li>，然後在級別1上觸發新的點擊事件<li> ...

這很明顯，它爲什麼會這樣做，但我需要一種方法來讓它只在最高級別出現一次（當我點擊「子類別1 1 「，它不應該觸發」類別1「的事件）。

還值得注意的是，這棵樹會自動生成，這意味着我可以將我的treeItem與其他類如「level1」或類似的東西貼在一起，但如果我能避免這種情況，我會喜歡它。

...好吧，因爲我覺得我有點迷失了自己在它這個問題可能需要總結......

1. 我需要在列表樹click事件
2. 我需要的單擊事件只能在最高級別（最深）被解僱。
3. 添加一些類名是可能的，但希望避免。

謝謝！

Answer 1

首先，您需要使用event.stopPropagation停止冒泡DOM並重復其自身的事件。然後您需要獲得li中的第一個文本節點。試試這個：

$(".myTree").on("click", ".treeItem", function(e) { 
    e.stopPropagation(); 
    var categoryName = $(this).contents().filter(function() { 
     return !!$.trim(this.innerHTML||this.data); 
    }).first().text(); 
    alert(categoryName); 
}); 

Example fiddle

Answer 2

您需要在活動上使用event.stopPropagation()。

$(".myTree").on("click", ".treeItem", function(event) { 
    var categoryName = $(this).text(); 
    alert(categoryName); 
    event.stopPropagation() 
});