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

问题描述

在主“ DIV_Container”中，我有一系列动态创建的DIV，单击某些按钮即可显示这些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（空白），当用户单击围绕该图像的区域（存在边距）时，该图像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而不是图像之后，进行了轻微更新：

使用事件委托选项，其中.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），事件冒泡将表示，如果图像没有自己的{ {1}}处理程序，该事件将一直冒泡到父项（和下一个父项等），直到找到事件处理程序为止。

click

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

在问题中使用HTML，然后点击<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>（最初假设.shirt_item是图像）：

img

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

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

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

您可以使用currentTarget代替const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development',entry: './index.js',output: { path: path.resolve(__dirname,'dist'),filename: 'bundle.js',},devServer: { contentBase: path.join(__dirname,open: true,port: 8080 },devtool: 'source-map',module: { rules: [ { test: /\.(png|jpe?g|gif|svg)$/i,use: [ { loader: 'file-loader',options: { name: '[name].[ext]',esModule:false,publicPath: 'images' } },],{ test: /\.html$/i,loader: 'html-loader' } ] },plugins: [ new HtmlWebpackPlugin({ filename: 'index.html',template: './index.html' }) ] }，它引用了监听事件的元素，其中target引用了到触发事件的元素：

演示：

target

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

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

dynamically-generated html javascript jquery