如何使用嵌套形式的 jquery 获取元素数据字段

Question

这是 jquery，代码，当您单击 "GENERAL" 或 "CSS ISSUES" 等内部部分时，它总是 returns ID = 1。当我试图获取点击的 Li 的 ID 时。

 <ul id="faq_list" class="list-unstyled">
       <li data-type="parent" data-value="1">
                <a href="javascript:;">General</a>
                <div class="subdata" id="target_1">
                   <ul>             
                        <li data-type="parent" data-value="5">
                      <a href="javascript:;">CSS Issues</a>
                      <div class="subdata" id="target_5"></div>
                      </li>
                  </ul>
                </div>
       </li>
       </ul>

这是JQUERY代码

    $(document).ready(function(e) {

        $("li").on('click',function(e) {


            var id = $(this).attr('data-value'); alert(id);
            load_data(id);
        });
    });

Answer 1

您需要使用 stopPropagation():

停止事件冒泡

$("li").on('click',function(e) {
    e.stopPropagation();

    var id = $(this).attr('data-value');
    alert(id);
    load_data(id);
});

请参阅 this JSFiddle 或运行下面的演示代码段。

$("li").on('click', function(e) {
  e.stopPropagation();

  var id = $(this).attr('data-value');
  alert(id);
  load_data(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="faq_list" class="list-unstyled">
  <li data-type="parent" data-value="1"> <a href="javascript:;">General</a>

    <div class="subdata" id="target_1">
      <ul>
        <li data-type="parent" data-value="5"> <a href="javascript:;">CSS Issues</a>

          <div class="subdata" id="target_5"></div>
        </li>
      </ul>
    </div>
  </li>
</ul>

如何使用嵌套形式的 jquery 获取元素数据字段

How to get element data field using jquery in nested form

html

jquery

element