JS动态生成图片元素时addEventListener绑定无效问题求助

核心问题 #

你的代码存在几个关键错误，直接导致点击事件失效：

1. DOM重写丢失事件监听
   每次通过document.body.innerHTML = ...添加元素时，浏览器会销毁当前body的全部内容，再重新解析新的HTML字符串。这会清除之前所有元素绑定的事件监听，而且你通过element.outerHTML转换后的元素，不会保留原元素上绑定的事件。

2. 语法错误中断代码执行

• document.body.innerHTML = "" + element.outerHTML + document.body.innerHTML;这行里的换行是语法错误，会直接导致代码报错停止运行。
• highlight函数里的while (True)是错误写法，JavaScript的布尔值是小写的true，大写True会被视为未定义变量，触发报错。

3. 未定义依赖属性
   你在highlight中尝试获取n.currentTarget.myParam，但从未给元素设置过这个属性，会导致报错。

修复后的代码 #

function placePieces() {
  for (var i = 0; i < setup.length; i++) {
    if ((setup[i]+'' == "undefined")) {continue;}
    var element = document.createElement("img");
    element.src = "Images/" + pieces[Object.keys(pieces)[setup[i]]] + ".png";
    element.style.width = "10vh";
    element.style.height = "10vh";
    element.style.marginTop = (Math.floor(i/8) * 10) + "vh";
    element.style.marginLeft = "calc(((100vw - 80vh)/2) + " + (10 * (i%8) - 1) + "vh)";
    element.style.zIndex = 10;
    element.style.position = "absolute";
    element.id = i+1;
    // 给元素绑定需要的参数
    element.myParam = i;
    // 提前绑定点击事件
    element.addEventListener("click", highlight);
    // 直接添加元素到DOM，避免重写整个body
    document.body.prepend(element);
  }
}
placePieces()

function highlight(event) {
  console.log(event);
  var n = event.currentTarget.myParam;
  if (setup[n] == 0 || setup[n] == 6) {
    var moves = [];
    var m = n;
    // 修正布尔值写法，并添加循环终止条件
    while (true) {
      if (!(Math.floor((m-9)/8) <= 0)) {
        console.log("test");
        // 这里根据需求调整终止逻辑，避免无限循环
        m -= 8;
      } else {
        break;
      }
    }
  }
}

关键修复点说明 #

• 避免重写DOM：用prepend直接添加创建好的元素，不会销毁原有内容，事件监听也能直接生效。
• 提前绑定事件：在元素添加到DOM之前就绑定点击事件，无需后续重新获取元素再绑定。
• 修正语法错误：把True改为true，修复innerHTML赋值的换行问题。
• 绑定参数：给元素直接设置myParam属性，存储需要的索引值。
• 添加循环终止条件：原while循环无终止逻辑会导致无限循环，这里添加了基础的终止判断，可根据实际需求调整。

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