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>