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

原文 标签 javascript html jquery dynamically-generated

在主“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); 
    }); 

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

最佳答案

在澄清 .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>

关于javascript - 动态创建内容时获取父DIV的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64086928/

相关文章:

javascript - 如何通过字符串从函数创建对象:

javascript - 在选择提交时重定向到值url

html - CSS放大图像悬停

javascript - 如何使用 ajax 保留列表

javascript - Backbone.js |如何存储 View 元素以供以后检索?

java - 用于控制 Web 应用程序的 kinect API

javascript - 使用JavaScript映射和简化JSON对象

html - 如何在带有溢出滚动的父级中包含子元素的边距?

php - 使用 jQuery 的动态链式选择框

javascript - 滚动过去时如何将 div/导航栏粘贴到窗口顶部