は、私がこのようなHTMLでリストのツリーを持っているリスト

Question

のツリー内の項目を一覧表示するにはクリックイベントを追加します。

<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、サブカテゴリ1 1など）を取得する "treeItem"クラス要素のクリックイベントです。

私はこの思い付いた：私が今直面しています唯一の問題は、私は「レベル1」をクリックすると、すべての最初の、categoryNameは

Category 2 

       Subcategory 1 1 
       Subcategory 1 2 

が含まれていることです

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

<li>（カテゴリ1など）。私はcatnameの属性を私の<li>に追加することでこれを回避することができましたが、最も重要なのは、「レベル2」<li>（サブカテゴリ1 1など）をクリックすると、レベル2のクリックイベントが最初にトリガーされる<li>レベル1で新しいクリックイベントを発生させます ...

なぜそれがそれを行うのかはっきりしていますが、最高レベルで1回しか発生しない方法が必要です（「サブカテゴリ1 1 "、" Category 1 "のイベントを発生させてはならない）。

このツリーは自動的に生成されますので、treeItemに「level1」などの他のクラスを付けてラベル付けすることができますが、それを避けることができれば嬉しいです。

...私はちょっとそれで自分自身を失ったと感じてよし、この質問は、要約を必要とするかもしれない...

1. 私はそのクリックイベントを必要とするリスト
2. の木の上のクリックイベントを必要とします最高レベル（最も深い）で解雇されるだけです。
3. いくつかのクラス名を追加することはできますが、避けたいです。

ありがとうございました！

Answer 1

あなたはDOMをバブリングし、自分自身を繰り返しイベントを停止するevent.stopPropagationを使用する必要がまず第一。次に、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() 
});