Question

点击2级时，我想获得特定的li值。

<li><span class="classSpan"> Level 
      <ul>
        <li> <span class="classSpan"> Level 1 Item 1  
        <ul>
         <li><span class="classSpan">Level 2 Item 1</span</li>
         <li><span class="classSpan">Level 2 Item 2</span</li>
        </ul>
        </span> 
       </li>
      </ul>
      </span>
     </li>

以下事件将触发3次而不是一次（对所有父母来说都是火）。它必须只发射一次，仅适用于选定的li。

 $('.classSpan').click(function (e) {
   alert('click')                
  });

Answer 1

那是因为事件正在冒泡/传播到父母身上。使用e.stopPropagation()阻止它冒泡并触发其他事件回调：

$('.classSpan').click(function (e) {
  e.stopPropagation();
  console.log('click')                
});

证明的概念：

＆＃13;

$(function() {
  $('.classSpan').click(function(e) {
    e.stopPropagation();
    console.log('click')
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="classSpan">
      Level 
      <ul>
        <li>
          <span class="classSpan">
            Level 1 Item 1  
            <ul>
              <li><span class="classSpan">Level 2 Item 1</span></li>
              <li><span class="classSpan">Level 2 Item 2</span></li>
            </ul>
          </span>
        </li>
      </ul>
    </span>
  </li>
</ul>

＆＃13;

一些提示：

你可能想要修复你的标记：不要将<ul>包裹在<span>中，而是将其作为兄弟姐妹。
停止使用alert进行调试：它实际上会停止该线程。请改用console.log()，然后打开开发人员工具。

Answer 2

你走了。你的跨度让他们全都进去了。因此，当您单击任何一个时，这会导致单击它。

<li><span class="classSpan"> Level</span>
      <ul>
        <li> <span class="classSpan"> Level 1 Item 1  </span> 
        <ul>
         <li><span class="classSpan">Level 2 Item 1</span></li>
         <li><span class="classSpan">Level 2 Item 2</span></li>
        </ul>
       </li>
      </ul>
     </li>

    $(document).ready(function(){
   $('.classSpan').click(function (e) {
     var x = $(this).text()
   alert(x)                
  });
});

Answer 3

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256 DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

你需要阻止当前事件在捕获和冒泡阶段的传播。你需要停止e.stopPropagation（）;

<ul>
   <li>
      <span class="classSpan"> Level 
        <ul>
          <li>
           <span class="classSpan"> Level 1  
             <ul>
                 <li><span class="classSpan">Level 1 Item 1</span></li>
                 <li><span class="classSpan">Level 1 Item 2</span></li>
             </ul>
          </span>
       </li>
     </ul>
   </span>
 </li>
</ul>

脚本

$(function() {
  $('.classSpan').click(function(e) {
      e.stopPropagation();
      var data = $(this).text()
     console.log(data + 'your li text get')
   });
});

如何获取选定的li值，而不是父li值

3 个答案: