Question

这是jquery，代码，当你点击“GENERAL”或内部部分如“CSS ISSUES”时，它总是返回ID = 1。虽然我想点击李的身份证。

 <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 CODE

    $(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获取元素数据字段

1 个答案: