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.