html - How to get element data field using jquery in nested form -

this jquery, code, returns id = 1 when click on "general" or inner section "css issues". while trying id of li clicked.

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

here jquery code

    $(document).ready(function(e) {          $("li").on('click',function(e) {               var id = $(this).attr('data-value'); alert(id);             load_data(id);         });     }); 

you need stop event bubbling using stoppropagation():

$("li").on('click',function(e) {     e.stoppropagation();      var id = $(this).attr('data-value');     alert(id);     load_data(id); }); 

see this jsfiddle, or run following snippet demo.

$("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>