jQuery Prevent parent's event to be triggered when child's event is triggered

Question

Recently I have some problems with jQuery. Let's just say I have elements like this:

<div id="parent1" class="parent">
    <div id="child1" class="children">
        <a href="" id="child_link1" class="child_link"></a>
    </div>
</div>

and I have jQuery function like this:

$(".parent").click(function(){
    alert("parent is clicked");
});

$(".child_link").click(function(){
    alert("child link is clicked");
});

If I click the child_link, parent will be triggered too. How can I create a situation where if I click the child_link, parent won't be triggered?

score 9 · Answer 1 · answered Jan 23 '13 at 11:14

9

You need to stop propagation on the child click event, like this:

$(".child_link").click(function(e) {
    e.stopPropagation();
    alert("child link is clicked");
});

Example fiddle

answered Jan 23 '13 at 11:14

Rory McCrossan

331,213
40
305
339

Thanks for the reply, I tried using the stopPropagation but unfortunately, even the child_link event was not triggered. It only went back to the top page doing nothing. – Henry Gunawan Jan 23 '13 at 16:11
Did you remember to pass the event in to the function? `.click(function(e) {` <-- there – Rory McCrossan Jan 23 '13 at 16:56

score 4 · Answer 2 · answered Jan 23 '13 at 11:14

4

Event handler for the child should be written like so:

$(".child_link").click(function( event ){
    event.stopPropagation();
    alert("child link is clicked");
});

This will stop event bubbling, and parent's event handler will not get called.

answered Jan 23 '13 at 11:14

Jan Hančič

53,269
16
95
99

Thanks for the reply, I tried using the stopPropagation but unfortunately, even the child_link event was not triggered. It only went back to the top page doing nothing. – Henry Gunawan Jan 23 '13 at 16:13

score 4 · Answer 3 · answered Jan 23 '13 at 11:17

4

See your event is getting bubbling up to its parent. So here you have to use .stopPropagation();:

$(".child_link").click(function(ev){
  ev.stopPropagation(); //<----------------this stops the event to bubble up
  alert("child link is clicked");
});

answered Jan 23 '13 at 11:17

Jai

74,255
12
74
103

reason for downvote? plz share. – Jai Jan 23 '13 at 11:18
1

I don't know who is down voting. I've up-voted you to compensate :) – Jan Hančič Jan 23 '13 at 11:20
@Jai Perhaps the reason of downvoting in doubling answers? What is in your answer new comparing with Rory McCrossan's one? The same absolutely applies to you Jan Hančič – tony Jan 23 '13 at 11:40
there are some more comments in the answers to indicate the solution. – Jai Jan 23 '13 at 11:44
"So here you have to use .stopPropagation();" yes, very handy point, without this comment author of question wouldn't came up to this conclusion. – tony Jan 23 '13 at 11:46
That's not a reason to down-vote. Read the FAQ. And besides, Rory and I posted simultaneously. – Jan Hančič Jan 23 '13 at 11:53
1

It looks incriminating that my answer is the only one not downvoted, but it wasn't me. As said, duplicate answers within seconds can happen and is no reason to downvote. Have +1 from me guys. – Rory McCrossan Jan 23 '13 at 11:55
Thanks for the reply, I tried using the stopPropagation but unfortunately, even the child_link event was not triggered. It only went back to the top page doing nothing. – Henry Gunawan Jan 23 '13 at 16:12

jQuery Prevent parent's event to be triggered when child's event is triggered

3 Answers3