Jquery Live Method And Event Bubbling

Take a look at the following code

[script type="text/javascript"]

                //parent clicked, return false

                $('.level1').live('click', function () {

                                return false;

                });

                //child clicked, alert

                $('.level2').live('click', function () {

                                alert('level2 clicked');

                });

[/script]

[div class="level1"]

[div class="level2"]Clicking on my will not alert[/div]

[/div]

In Jquery Live-events-binding, the event from level2(child) element will be passed on to level1(parent), then to parent's parent and finally to the root of the DOM(document object). If on any level the event it being canceled/interrupted by a parent then the child element's event will not be triggered. For example in the given code when we will click on the level2 element, the alert box will not show because the level1 div is blocking it by returning a false. This is the way things work in Jquery Live-events-binding. So be careful while using Live Events which can behave unexpected due to a little logical mistake.