Nested element with events

Question

I have an element that looks like this,

<div class='outer'>
    <div class='inner'></div>
</div>

I have 2 events on this DOM elements,

$('.outer').click(function(e){
    console.log("outer has been triggered");
});

$('.inner').click(function(e){
    console.log("inner has been triggered");
});

Now, if click .outer I get the "outer has been triggered" in my console, if I click .inner I get "outer has been triggered" and "inner has been triggered", is there a way to only trigger inners event on inners click and keep it nested within the outer div?

Here is an example, http://jsbin.com/bewukakakuju/2/edit

e.stopPropagation(); http://jsbin.com/meyulefoyave/1/edit. More info here: http://api.jquery.com/event.stoppropagation/ — SSA, Sep 30 '14 at 15:37
Another duplicate: http://stackoverflow.com/q/1369035/218196 — Felix Kling, Sep 30 '14 at 15:47

score 2 · Accepted Answer · answered Sep 30 '14 at 15:39

2

$('.inner').click(function(e){
    console.log("inner has been triggered");
    e.stopPropagation();
});

answered Sep 30 '14 at 15:39

friedi

4,310
1
12
19

Code without an **explanation** is rarely helpful. – Felix Kling Sep 30 '14 at 20:13

Nested element with events

1 Answers1