how can I make just child invoked when I click on child in the div element

Question

I have a simple scenario: I have two div one inside another, I want when I click on the child div just child div invokes and when I click on parent the parent one invoke but in the example below as you can see when I click on child both are invoked.Here is my code :

$(document).ready(function(){

$("#t1").click(function(){alert("Parent")});
 $("#t2").click(function(){alert("child")});

});

http://jsfiddle.net/hminaee/hv6dv/

can anyone help?

`$(document).ready(function(){ $("#t1").click(function(){alert("Parent")}); $("#t2").click(function(e){e.stopPropagation();alert("child")}); });` http://jsfiddle.net/pranavcbalan/hv6dv/1/ — Pranav C Balan, Mar 01 '14 at 05:31
possible duplicate of [Prevent execution of parent event handler](http://stackoverflow.com/questions/1398582/prevent-execution-of-parent-event-handler) — Felix Kling, Mar 01 '14 at 05:54

score 3 · Accepted Answer · answered Mar 01 '14 at 05:31

3

You should stop the event from bubbling up the DOM tree(any parent handlers from being notified of the event) using event.stopPropagation(). Try:

$(document).ready(function(){
    $("#t1").click(function(){alert("Parent")});
     $("#t2").click(function(e){e.stopPropagation();alert("child")});
});

DEMO

answered Mar 01 '14 at 05:31

Kiran

20,167
11
67
99

Thanks but now when I did that just parent alert execute and alert for child never execute! – HMdeveloper Mar 01 '14 at 05:34

score 1 · Answer 2 · answered Mar 01 '14 at 05:30

1

You need to use e.stopPropagation() here to prevent click event buble up the DOM tree from your child div #t2 to parent div #t1

$("#t2").click(function(e){
    e.stopPropagation(); 
    alert("child")
});

Updated Fiddle

answered Mar 01 '14 at 05:30

Felix

37,892
8
43
55

how can I make just child invoked when I click on child in the div element

2 Answers2