点击div内动态追加的图片时如何获取其id或src属性

你绑定外层div点击事件时传入的this.id是外层div本身的id，并不是你点击的内部动态生成图片的id，所以返回undefined。

方案1：使用事件委托（推荐，适配动态生成元素，性能更优） #

不需要给每个图片单独绑定点击事件，只需要在外层div的点击事件中捕获实际触发点击的元素即可：

1. 修改外层div的点击事件绑定，传入事件对象：

<div id="FeedImages" class="imageFeed" onclick="test(event)"></div>

2. 编写test函数获取图片属性：

function test(e) {
  const clickTarget = e.target;
  // 判断点击的元素是否为图片
  if (clickTarget.tagName.toLowerCase() === 'img') {
    // 获取图片id
    const imgId = clickTarget.id;
    // 获取图片src
    const imgSrc = clickTarget.src;
    // 此处写后续删除逻辑即可，例如直接删除当前点击的图片：clickTarget.remove()
    console.log('点击的图片id：', imgId, '点击的图片src：', imgSrc);
  }
}

方案2：创建图片时直接绑定点击事件 #

在动态生成img元素的环节直接给每个图片绑定点击事件，不用依赖外层div的事件：

let temp2 = 0;
// 注意原代码循环条件写的是temp<100，你累加的是temp2，会导致死循环，修改为temp2<100
do {                     
  const img = document.createElement("img");
  img.setAttribute("src", ImagePath);
  img.setAttribute("id", temp2);
  // 给当前图片绑定点击事件
  img.onclick = function() {
    const imgId = this.id;
    const imgSrc = this.src;
    // 此处写后续删除逻辑即可
    console.log('点击的图片id：', imgId, '点击的图片src：', imgSrc);
  }
  // 注意原代码此处写的是getElementById("FeedImages"+i)，你的div id为FeedImages，如果没有定义i变量会找不到DOM，确认是否需要移除+i
  document.getElementById("FeedImages").appendChild(img);
  temp2++;
} while(temp2 < 100);

原有代码注意事项 #

• 原循环条件while(temp<100)中，你循环内累加的变量是temp2，如果temp变量没有同步更新会进入死循环，建议修改为temp2<100
• 原插入DOM的代码document.getElementById("FeedImages"+i)中，如果不存在提前定义的变量i，会找不到对应外层div，导致图片插入失败，建议确认i变量逻辑是否正确。

内容的提问来源于stack exchange，提问作者luca amarelli