所有李的点击后点击一个李 - jquery

Question

我有li的和ul的作为一个层次树。

但是当我点击li，所有li的点击。

例如，当我点击id="11"，我的控制台日志让我这个消息：

11 
10 
9 
1 

的jQuery：

$("li.change_select").click(function() { 
    var category_id = $(this).attr('id'); 
    console.log(category_id); 
}); 

HTML：

<div class="row"> 

    <ul style="cursor:pointer" class="change_select"> 
     <li id="1" class="change_select">بدون دسته بندی 
      <ul style="cursor:pointer" class="change_select"> 
       <li id="2" class="change_select">تست 
        <ul style="cursor:pointer" class="change_select"> 
         <li id="3" class="change_select">تست 2</li> 
         <li id="4" class="change_select">عنوان</li> 
         <li id="5" class="change_select">تست 
          <ul style="cursor:pointer" class="change_select"> 
           <li id="6" class="change_select">تست 
            <ul style="cursor:pointer" class="change_select"> 
             <li id="7" class="change_select">تست 4 
              <ul style="cursor:pointer" class="change_select"> 
               <li id="8" class="change_select">تست 5</li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li id="9" class="change_select">شماره 2 
        <ul style="cursor:pointer" class="change_select"> 
         <li id="10" class="change_select">شماره 3 
          <ul style="cursor:pointer" class="change_select"> 
           <li id="11" class="change_select">شماره 6</li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 

</div> 

Answer 1

您可以使用：

e.stopPropagation()：为了防止事件冒泡DOM树，阻止任何父处理程序被通知的事件。

我的片段：

$("li.change_select").click(function(e){ 
 
    e.stopPropagation(); 
 
    var category_id = $(this).attr('id'); 
 

 
    console.log(category_id); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div> 
 
    <ul style="cursor:pointer" class="change_select"> 
 
     <li id="1" class="change_select">بدون دسته بندی 
 
      <ul style="cursor:pointer" class="change_select"> 
 
       <li id="2" class="change_select">تست 
 
        <ul style="cursor:pointer" class="change_select"> 
 
         <li id="3" class="change_select">تست 2</li> 
 
         <li id="4" class="change_select">عنوان</li> 
 
         <li id="5" class="change_select">تست 
 
          <ul style="cursor:pointer" class="change_select"> 
 
           <li id="6" class="change_select">تست 
 
            <ul style="cursor:pointer" class="change_select"> 
 
             <li id="7" class="change_select">تست 4 
 
              <ul style="cursor:pointer" class="change_select"> 
 
               <li id="8" class="change_select">تست 5</li> 
 
              </ul> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li id="9" class="change_select">شماره 2 
 
        <ul style="cursor:pointer" class="change_select"> 
 
         <li id="10" class="change_select">شماره 3 
 
          <ul style="cursor:pointer" class="change_select"> 
 
           <li id="11" class="change_select">شماره 6</li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 

 
</div>

Answer 2

这是哈开始冒泡DOM树。您应该使用如下所示的stopPropagation()。

$("li.change_select").click(function(e){ 
    e.stopPropagation(); 

    var category_id = $(this).attr('id'); 
    console.log(category_id); 
});