how jQuery event bubbling works?

Question

I have the following HTML code:

<ul id="level1">
     <li id="level21">item1</li>
     <li id="level22">item2</li>
</ul>

I tried to do event bubbling for the child class <li> using jQuery:

$(document).ready(function(){
    $('#level1').on('click', function(event){
         alert($(this) + ',' + event);
    });
});

This code does not trigger event bubbling for both <li> class. Is this because the child classes do not have click events for them? I still don't understand when event bubbling would be triggered?

Bubbling occurs from innermost child to parent. So if you define it on inner `li`; click will trigger of inner `li` first and then on subsequent parents. — Shaunak D, Apr 11 '15 at 14:59
Have a look at http://www.quirksmode.org/js/events_order.html and http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Andreas, Apr 11 '15 at 15:12
So basically event bubbling always happens when an event is triggered. In my code, if I were to assign another click event on the `

score 2 · Accepted Answer · answered Apr 11 '15 at 16:15

2

The <ul> element is wrapping the <li> elements, that's why the alert triggers when you click either of the items. Same happens for every DOM element that you attach a click event to - all child elements will trigger the event when clicked on (unless you stop the propagation by calling event.stopPropagation()).

It has, at the moment, nothing to do with event bubbling. As the comments state correctly, bubbling is when the event triggers for the element, and then trigger for parent elements in sequence.

Your comment is also correct. If you attached an event for an li, you'll see two alerts as you can see in this Fiddle I made.

answered Apr 11 '15 at 16:15

Omri Aharon

16,959
5
40
58

thanks a lot. so is it because of inheritance that the child elements get the methods (functions) as well? – blank_kuma Apr 11 '15 at 16:19
1

@blank_kuma Exactly :) – Omri Aharon Apr 11 '15 at 16:19
Thanks a lot. All of you guys clarified a lot for me :) – blank_kuma Apr 11 '15 at 16:22

how jQuery event bubbling works?

1 Answers1