Q:

Jquery on click child element triggers on click parent element

I've similar to this:
<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

And I've two on click triggers.
$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

If I click child, parent is also clicked!
How do i avoid this?
http://jsfiddle.net/Vd2GA/

A:

Use either return false or e.stopPropagation() in child click event handler:
$(document).on("click", ".child", function(e) {
    console.dir("child clicked");
    return false;  // e.stopPropagation();
});

DEMO: http://jsfiddle.net/Vd2GA/1/

