javascript - 单击时的嵌套 li 值不起作用

Question

我有嵌套 li 元素的元素，并且我创建了一个单击函数来获取值。每次我单击时，我都会一次又一次地获得相同的值。

<script type="text/javascript">

    $('.cat-select').on('click',function(){
        $('.cat-list').css('display','block');
         $('.sub-list').css('display','block');

    });

    $(document).on('click','.cat-list>li',function(){
        var selectedVal = $(this).clone()   //clone the element
            .children() //select all the children
            .remove()   //remove all the children
            .end()  //again go back to selected element
            .text();    //get the text of elemen
        console.log(selectedVal);
        $('.cat-select').text(selectedVal);
    });
</script>


<div class="form-group">
   <label for="input-placeholder" class="col-sm-2 control-label"></label>
    <div class="col-sm-10"> 
        <style type="text/css">
            .cat-list, .sub-list{ display: none; }
        </style>
        <div class="cat-group">
            <button class="cat-select" type="button">Select Category</button>
            <ul class="cat-list">
                <li class="have-child">Electronics 
                    <ul class="sub-list">
                        <li class="have-child"> Mobiles & Tablets
                            <ul class="sub-list">
                                <li>Mobiles</li>
                                <li>Tablets</li>
                                <li class="have-child">Accessories</li>
                                    <ul>
                                        <li>Power Bank</li>
                                        <li>Phone Cases</li>
                                    </ul>
                            </ul>
                        </li>
                        <li class="have-child">Cameras
                            <ul class="sub-list">
                                <li>DSLRs</li>
                                <li>Drones</li>
                            </ul>
                        </li>
                    </ul>
                </li>        
            </ul>
        </div>
    </div>
</div>

每次点击我都会得到相同的值

https://jsfiddle.net/yx4Ldt80/

Answer 1

您看到的问题是因为您仅通过使用 > 运算符将事件处理程序附加到 .cat-list 的子级。

要解决此问题，请将其从选择器中删除，并对事件调用 stopPropagation() 以阻止其在 DOM 中冒泡。试试这个:

$(document).on('click', '.cat-list li', function(e) {
    e.stopPropagation();
    var selectedVal = $(this).clone().children().remove().end().text();
    $('.cat-select').text(selectedVal);
})

$('.cat-select').on('click', function() {
  $('.cat-list, .sub-list').toggle();
});

$(document).on('click', '.cat-list li', function(e) {
  e.stopPropagation();
  var selectedVal = $(this).clone().children().remove().end().text();
  $('.cat-select').text(selectedVal);
})

.cat-list,
.sub-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group">
  <label for="input-placeholder" class="col-sm-2 control-label"></label>

  <div class="col-sm-10">
    <div class="cat-group">
      <button class="cat-select" type="button">Select Category</button>

      <ul class="cat-list">
        <li class="have-child">Electronics
          <ul class="sub-list">
            <li class="have-child">
              Mobiles &amp; Tablets
              <ul class="sub-list">
                <li>Mobiles</li>
                <li>Tablets</li>
                <li class="have-child">Accessories
                  <ul>
                    <li>Power Bank</li>
                    <li>Phone Cases</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="have-child">
              Cameras
              <ul class="sub-list">
                <li>DSLRs</li>
                <li>Drones</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

另请注意，我修复了“附件”ul 中的 HTML，因为它位于父 li 之外。