Monday, 12 August 2013

jQuery: Understanding "event.stopPropagation()" when underlying element has click event set using "find()"

jQuery: Understanding "event.stopPropagation()" when underlying element
has click event set using "find()"

HTML:
<ul>
<li>
<a href="http://wp.pl">wp.pl</a>
</li>
</ul>
Javascript:
$(document).ready(function() {
$body = $('body');
$body.on('click', 'a', function(event) {
event.preventDefault();
event.stopPropagation();
/**
* Causes the "This also..." never shows, but "Why is..." still
appears
*/
//event.stopImmediatePropagation();
alert('Should be seen always');
});
$body.on('click', 'a', function(event) {
alert('This also should be seen - same level as "a"');
});
$body.on('click', 'li', function() {
alert('This never shows - and that is ok - because is under "a"');
});
$body.find('ul').on('click', 'li', function() {
alert('Why is this shown?');
});
});
Fiddled here: http://jsfiddle.net/g3PEr/1/
The question is: why click event set on element found by find() fires even
when its child element has stopPropagation() or
stopImmediatePropagation()?

No comments:

Post a Comment