How to get element data field using jquery in nested form

Question

This is jquery, code, it always returns ID = 1 when you click on "GENERAL" or inner section like "CSS ISSUES". While i am trying to get ID of the 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 is JQUERY CODE

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

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


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

Sumner Evans · Accepted Answer · 2015-05-12 00:10:48Z

1

You need to 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 the following snippet for a 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>

answered May 12, 2015 at 0:10

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4691874 Over a year ago

Thank You, Actually i had tried e.stopPropagation() earlier, but couldn't make it work.

user4691874 Over a year ago

This code will not work with ajax returned data, that was actually my problem. e.stopPropagation()

Collectives™ on Stack Overflow

How to get element data field using jquery in nested form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related