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 )?

Answer 1

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.

Answer 2

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

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

    // Other Stuff
});

Answer 3

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);
});

Answer 4

<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>

Answer 5

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);
});