how to trigger click event on child element

Question

I have the following HTML structure:

<ul>
  <li>
      1- First Level
  </li>
  <li>
        <ul>
         <li>2 - Second Level</li>
       </ul>
 </li>
</ul>

I have the following jQuery

$(document).on('click','li',function(){
  var text = $(this).html();
  alert(text);
});

When I click on the li having the text 1- First Level, the click event is triggered.

But when I click on the sub li having text 2- Second Level, the trigger fires on the first li (since it is the parent)..

How can I trigger the click event on each li regardless of its status (parent/child)?

Jai · Accepted Answer · 2015-03-23 12:33:06Z

3

e.stopPropagation() will be the line you need to add, because any event bound on child bubbles up to the parent node, so result of it is both events occurs in the page.

e.stopPropagation() lets you stop the event to bubble up to the parent element in the DOM.

$(document).on('click','li',function(e){
  e.stopPropagation(); // stop the event to bubble up to the parent.
  var text = $(this).html();
  alert(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
      1- First Level
  </li>
  <li>
        <ul>
         <li>2 - Second Level</li>
       </ul>
 </li>
</ul>

edited Mar 23, 2015 at 12:33

answered Mar 23, 2015 at 12:06

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

Comments

Milind Anantwar · Accepted Answer · 2015-03-23 12:04:14Z

1

You need to stop event propogation using stopPropagation:

$(document).on('click','li',function(e){
   e.stopPropagation();
   var text = $(this).html();
   alert(text);
});

answered Mar 23, 2015 at 12:04

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Oleg Glybchenko · Accepted Answer · 2015-03-23 13:49:23Z

1

Try adding stopPropagation() in javascript

$(document).on('click','li',function(){
  var text = $(this).html();
  alert(text);
  stopPropagation();
});

Here is a fiddle https://jsfiddle.net/wLwccv7y/1/

Edited according to comments

edited Mar 23, 2015 at 13:49

answered Mar 23, 2015 at 12:10

Oleg Glybchenko

114 bronze badges

1 Comment

Saif Over a year ago

that would stop the event on all elements.

Collectives™ on Stack Overflow

how to trigger click event on child element

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related