jQuery click() on a nested div

Question

The code can probably explain this better than I can:

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});
</script>

When I click on the inner1 div, it runs the do_something() with both the inner1 div AND the wrapper.

With the site being built, nested divs are going to happen a lot. Is there a dynamic way to fix this issue and only run the top level div (in this case inner1)?

Have a look at this question: stackoverflow.com/questions/5022619/… — Russell
– Russell, Commented Sep 6, 2011 at 18:09

Joseph Silber · Accepted Answer · 2012-10-28 17:48:05Z

21

Use stopPropagation:

$('div').click(function(e){
    e.stopPropagation();
    var class_name = $(this).attr('class');
    do_something(class_name);
});

On the other hand: are you sure this is what you're trying to do? You might want to modify your selector ($('div')) to only target the DIV's you want.

edited Oct 28, 2012 at 17:48

answered Sep 6, 2011 at 18:07

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Haynes Over a year ago

Should be propagation with an a; I can't edit the answer itself to fix it, though.

koppor Over a year ago

Be ware that $(document).on("click", ...) and $("div").on("click") should not be mixed. Otherwise, event propagation does not work as intended.

Tejs · Accepted Answer · 2011-09-06 18:07:28Z

2

You need to prevent the event bubbling. With jQuery, you would do this:

$('div').click(function(e)
{
    e.stopPropagation();

    // Other Stuff
});

answered Sep 6, 2011 at 18:07

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Comments

Msencenb · Accepted Answer · 2011-09-06 18:08:19Z

0

You're selector is 'div' so on every single div that is clicked this will run. This includes wrapper, inner1, and inner2 in this example.

If you only want inner1 to fire off that function you're code will look like this:

$('.inner1').click(function(){
    var class_name = $(this).attr('class');
    do_something(class_name);
});

answered Sep 6, 2011 at 18:08

Msencenb

5,10411 gold badges56 silver badges87 bronze badges

Comments

ek_ny · Accepted Answer · 2011-09-06 18:08:23Z

0

<div class="wrapper">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

<script>
$('div').click(function(ev){
    var class_name = $(this).attr('class');
    do_something(class_name);
    ev.stopPropagation();
});
</script>

answered Sep 6, 2011 at 18:08

ek_ny

10.3k8 gold badges51 silver badges60 bronze badges

Comments

Guffa · Accepted Answer · 2011-09-06 18:08:28Z

0

The event bubbles until you stop it with the stopPropagation method:

$('div').click(function(e){
  e.stopPropagation();
  var class_name = $(this).attr('class');
  do_something(class_name);
});

answered Sep 6, 2011 at 18:08

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

jQuery click() on a nested div

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related