Get the ID of parent DIV when content is dynamically created

Question

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:

  //or id="div_shirts_container"

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.

user_2181514 · Answer

Following clarification that .shirt_item was the containing div, not the image, slight update:

Use your event delegation option, where .div_sub_dyn is the div that contains the image, you can use:

$("#div_shirts_container").on('click', '.div_sub_dyn', function(e){
    console.log(this.id);  
});

As clarified in the contents, when using function(e) { }, this becomes the filtered target, in this case .div_sub_dyn.

Using () => will need e.currentTarget (as also detailed in the other answer)

Note that technically you might be clicking on the image itself (eg in this snippet the image takes up the whole div), event bubbling will mean that, if the image does not have its own click handler, the event will keep bubbling up to the parent item (and next parent etc) until it finds an event handler.

$("#DIV_Container").on("click", ".div_sub_dyn", function() {
    var id = this.id;
    console.log("Clicked:", id);
});

Using the HTML in the question clicking on the img (original assumption that .shirt_item was the image):

$("#DIV_Container").on("click", "img", function() {

    var id = $(this).closest(".div_sub_dyn").attr("id")

    console.log("Clicked:", id);
});

user_7461381 · Answer

Instead of target you can use currentTarget which refers to the element that listens to the event where as target refers to the element that triggered the event:

Demo:

$("#DIV_Container").on('click', '.div_sub_dyn', function(e){
  var targetId = e.currentTarget.id;  
  console.log(targetId); 
});

.div_sub_dyn{
  padding: 5px;
  border: 1px solid;
  max-width: 50px;
}

Get the ID of parent DIV when content is dynamically created

2 Answers