Menu
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.
953
jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.
It is a jQuery Selector used to select all elements that are the direct child of its parent element. Parameter Values: parent: Using this, the parent element will be selected. child: Using this, the direct child element of the specified parent element will be selected.
To check if an element is a child of a parent with JavaScript, we can use the parent element's contains method. const contains = (parent, child) => { return parent !== child && parent. contains(child); };
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.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
