How to get the id of clicked area but not the parent id?

Question

How to get the id of the element clicked using jQuery this question have the answer of get the id of clicked element.

But it gives the all id.

For example

  <div id="major">
    <div id="two">  </div>
  </div>

When clicking the div two I want to get the id only one which is two. But the following script will give parent id also.

    $("body").on('click','div',function() 
    {   
        alert(this.id);
    });    //It alerts the two and major. But i want two only.

For this, purpose i tried to put the some undeclared function it gives result what i expect. For example

$("body").on('click','div',function() 
{   
    alert(this.id);
    mkh(); #undeclared function
});   

Is there any inbuild method for to do it.? JS Fiddle

Answer 1

You need to stop parent event propagation to child element:

$("body").on('click','div',function(e){   
  e.stopPropagation();
  alert(this.id);
  mkh(); #undeclared function
});   

Working Demo

Answer 2

Use event.target object.

$("body").on('click', 'div', function(e) {
  alert(e.target.id);
  e.stopPropagation();
});

#two {
  width: 100px;
  height: 100px;
  background: blue;
}
#major {
  width: 500px;
  height: 500px;
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="major">
  <div id="two"></div>
</div>

Answer 3

Not changing the target element.

Event object can be used to serve the purpose. $(event.target) will give current target element Using event.stopPropagation() to stop propagation(bubbling) of event when you click on inner div. Otherwise you will see two alerts of inner & outer div

    $("body").on('click','div',function(event) 
    {   event.stopPropagation();
   var _getId = $(event.target).attr('id');
    alert(_getId);

    });   

Check this jsfiddle

Answer 4

This is not too hard. Watch this:

$("body").on('click','#two',function() 
    {   
        alert(this.id);
    });