Inside a main "DIV_Container" I have a series of dynamically created DIVs which appear on the click of some button. Each div has an assigned ID such as "DIV_1, DIV2, DIV_n" etc, and they all have a class of 'div_sub_dyn'. Inside each one of these dyn created divs, there is also a image, so I have a file that looks like:
<div id="DIV_Container"> //or id="div_shirts_container"
<div class='div_sub_dyn' id="DIV_1">
<img src="image_1.jpg">
</div>
<div class='div_sub_dyn' id="DIV_2">
<img src="image_2.jpg">
</div>
<div class='div_sub_dyn' id="DIV_3">
<img src="image_3.jpg">
</div>
</div>
Question::: I want to grab the 'DIV_n' id of the respective sub-div whenever the user clicks on the contained image, or on any other item contained inside the DIV_n ( I plan to add more tags/elements). Right now, when the user clicks on the Image, only the Image ID is returned (blank), when he clicks on the area surrounging the image (there is a margin) belonging to the DIV_n, only THEN the 'DIV_n' id is returned. How do I get the click to return the ID of the DIV_n even when anything inside the DIV_n is clicked?
Right now, among other functions I have the following two choices of jQuery functions:
$(document)ready(function(){
$("#DIV_Container").click(function(e){
alert(e.target.id);
});
//or
$("#DIV_Container").on('click','.div_sub_dyn',function(e){
alert(e.target.id);
});
Many thanks, would really appreciate any help. Stay safe during this Coronavirus period.
// or id=div_shirts_container
- what is that can you explain that part as well.