クリック時にネストされたli値が機能しない

debugcn 投稿 Dev

ujwal dhakal

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/

ロリー・マクロサン

表示される問題.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。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]