How to alert the id of nested div without alerting the id of its parent?

Question

I want to alert the id of the div when I click on it. The code works fine but it also alerts the id of the parent div. How can I avoid that?

Here's the code: JSBin Link

<div id ="parentDiv">
  <div id ="child1"></div>
  <div id ="child2"></div>
</div>

JQuery Code:

$(document).ready(function(){
  $('div').click(function(){
   var index = $(this).attr("id");
   alert(index);
  });
});

Answer 1

use e.stopPropagation()

$('div').click(function(e){
   e.stopPropagation();
   var index = $(this).attr("id");
   alert(index);
});

Demo ---> http://jsbin.com/osafuw/1/edit

• http://api.jquery.com/event.stopPropagation/

Answer 2

You can use children() as well

$(document).ready(function(){
    $('div').children().click(function(){
    var index = $(this).attr("id");
    alert(index);
  });
});