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

Question

在主“DIV_Container”中，我有一系列动态创建的 DIV，它们会在单击某个按钮时出现。每个 div 都有一个分配的 ID，例如“DIV_1、DIV2、DIV_n”等，并且它们都有一个 class 的 'div_sub_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（我计划添加更多 tags/elements).现在，当用户点击图像时，只有图像 ID 是 returned（空白），当他点击属于 DIV_n 的图像周围区域（有边距）时，然后 'DIV_n' id 才被 returned。即使单击 DIV_n 中的任何内容，我如何获得 return 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，而不是图片，稍作更新：

使用您的事件委托选项，其中 .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="https://i.stack.imgur.com/OVOg3.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_2">
        <img src="https://i.stack.imgur.com/XZ4V5.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_3">
        <img src="https://i.stack.imgur.com/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="https://i.stack.imgur.com/OVOg3.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_2">
        <img src="https://i.stack.imgur.com/XZ4V5.jpg" width=150>
    </div>
    <div class='div_sub_dyn' id="DIV_3">
        <img src="https://i.stack.imgur.com/aH5zB.jpg" width=300>
    </div>
</div>

Answer 2

您可以使用 currentTarget 而不是 target，它指的是侦听事件的元素其中 target 指的是触发事件的元素 :

演示：

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

<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_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的ID

Get the ID of parent DIV when content is dynamically created

javascript

html

jquery

dynamically-generated