单击时嵌套的 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 。

Answer 2

“永远不要使用” Event.stopPropagation()

您可以做的最糟糕的事情（如此处和网络上的答案所建议的那样）是使用Event.stopPropagation() 。
不要使用Event.stopPropagation() ，除非你真的知道你在做什么。

应用程序应该始终了解在其上下文中发生的每个事件。
想象一下，您构建了一个弹出窗口、模式或自定义选择框，如果您单击页面中的其他任何位置，则需要关闭该框。 好吧，恭喜，一个 LI 元素阻止了你这样做。

改用Event.target

function myClickHandler(ev) {
  if (ev.target !== this) return; // Ignore if non-this called the event
  console.log( this.textContent );
}

这是您的特定用例的示例：

 const $cat = $('.cat-select'); $cat.on('click', function() { $('.cat-list, .sub-list').toggle(); }); $(document).on('click', '.cat-list li', function(ev) { if (ev.target !== this) return; // Ignore if non-this called the event const value = $(this).contents().filter((i, el) => el.nodeType == 3)[0].nodeValue; $cat.text(value); }); // Than, 3000 lines later... THANK YOU BECAUSE: $('body').on('click', function() { // Close a popup or something console.clear(); console.log(`YEY I registered an event! Thank you for not using Event.preventDefault()`); });

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

 <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 & 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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

根据event.target属性获取被点击的元素。 虽然您可以通过contents()和filter()方法避免克隆，这有助于过滤掉文本节点。

$(document).on('click', 'li', function(e) {
  // if target element is not `li` tag then get closest li tag
  var selectedVal = (e.target.nodeType == 'LI' ? $(e.target) : $(e.target).closest('li'))
    .contents() // get all children nodes 
    .filter(function() { // filter  out text nodes
      return this.nodeType === 3;
    }).text(); // get text content

  $('.cat-select').text(selectedVal);
})

 $(document).on('click', 'li', function(e) { // if target element is not `li` tag then get closest li tag var selectedVal = (e.target.nodeType == 'LI' ? $(e.target) : $(e.target).closest('li')) .contents() // get all children nodes .filter(function() { // filter out text nodes return this.nodeType === 3; }).text(); // get text content $('.cat-select').text(selectedVal); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 & 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>

Answer 4

我希望这个能帮助你

$('.cat-select').each(function() {
    $(this).on('click', function() {
    $('.cat-list').css('display', 'block');
    $('.sub-list').css('display', 'block');
    });
});
$(document).on('click', function() {
    $(this).each('.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);
    });
});