javascript - 动态创建内容时获取父DIV的ID

Question

在主“DIV_Container”内，我有一系列动态创建的 DIV，它们会在单击某个按钮时出现。每个 div 都有一个分配的 ID，例如“DIV_1、DIV2、DIV_n”等，它们都有一个“div_sub_dyn”类。在这些 dyn 创建的每个 div 中，还有一个图像，所以我有一个看起来像这样的文件:

<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>

问题:::
每当用户单击包含的图像或 DIV_n 中包含的任何其他项目时，我都想获取相应子 div 的“DIV_n”ID(我计划添加更多标签/元素)。现在，当用户点击图片时，只返回图片ID(空白)，当他点击属于DIV_n的图片周围区域(有边距)时，只返回'DIV_n'id .即使单击 DIV_n 内的任何内容，如何单击以返回 DIV_n 的 ID？
现在，在其他函数中，我有以下两种 jQuery 函数选择:

$(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); 
    }); 

非常感谢，非常感谢任何帮助。在这个冠状病毒期间保持安全。

Answer 1

在澄清 .shirt_item是包含 div，而不是图像，轻微更新:

使用您的事件委托(delegate)选项，其中 .div_sub_dyn是包含图像的 div，您可以使用:

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

如内容中所述，使用 function(e) { } 时, this成为过滤后的目标，在本例中为 .div_sub_dyn .
使用 () =>需要 e.currentTarget (在另一个答案中也有详细说明)
请注意，从技术上讲，您可能正在单击图像本身(例如，在此片段中，图像占据了整个 div)，事件冒泡意味着，如果图像没有自己的 click处理程序，事件将继续冒泡到父项(和下一个父项等)，直到找到事件处理程序。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DIV_Container">
    <div class='div_sub_dyn' id="DIV_1">        
        <img src="/image/OVOg3.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_2">
        <img src="/image/XZ4V5.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_3">
        <img src="/image/aH5zB.jpg" width=300>
    </div>
</div>

使用问题中的 HTML 单击 img (原始假设 .shirt_item 是图像):

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DIV_Container">
    <div class='div_sub_dyn' id="DIV_1">        
        <img src="/image/OVOg3.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_2">
        <img src="/image/XZ4V5.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_3">
        <img src="/image/aH5zB.jpg" width=300>
    </div>
</div>