jQuery click event on parent, but finding the child (clicked) element

Question

let say I have a parent element which has so many nested child elements inside of itself:

<div id="p">     <div id="c1">         <div id="c2"></div>         <div id="c3"></div>     </div id="c4">         <div id="c5"></div>     </div> </div> 

I've already bind a click event on the parent:

$('#p').bind('click', function() {     alert($(this).attr('id')); }); 

Because the event is assigned to the parent element, I always see the parent id, however, I'm wondering if there is any possible way to find out which of this child elements has been clicked?

I also can't assign any event to the child elements or remove the event listener from parent div.

Answer 1

You need to pass event object to function to get the item that triggered the event, event.target will give you the source element.

Live Demo

 $('#p').bind('click', function(event) {     alert(event.target.id);  }); 

or

Live Demo

$('#p').bind('click', function(event) {     alert($(event.target).attr('id')); }); 

Edit

The first method event.target.id is preferred over second $(event.target).attr('id') for performance, simplicity and readability.