Jquery on click child element triggers on click parent element

Question

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/

Answer 1

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/

Answer 2

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

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

should do

Answer 3

Prevent the propagation of event from the child.

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

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

Demo: Fiddle

Note: this technique is possible here only because jQuery does some behind the scene magic when event delegation is used else since both the handlers are registered to document object this cannot be done

Answer 4

Use event.stopPropagation

fiddle Demo

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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

Read What is event bubbling and capturing?

Answer 5

Updated the fiddle here: http://jsfiddle.net/Vd2GA/2/.

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

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

Answer 6

or you can use this condition if you need to be specific

 $(document).on("click", ".parent", function(e){
   if (e.target==this)
    console.dir("parent clicked");
 });

http://jsfiddle.net/Vd2GA/4/