addEventListener不处理js生成的元素(图像)

Question

我把一堆图像放在页面中央的网格上，希望在单击每个单独的图像时添加一个检查。这些图像是用js创建的，并添加到文档中，它们是否还没有“准备好”之类的问题？

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;
    document.body.innerHTML = "\n" + element.outerHTML + document.body.innerHTML;
    console.log(element.outerHTML)
    var nelement = document.getElementById(i+1);
    console.log(nelement)
    nelement.addEventListener("click",highlight);
  }
}
placePieces()

function highlight(n) {
  console.log(n)
  n = n.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")
      }
    }
  }
}

第二个函数还远未完成，但它仍然没有返回任何应该返回的内容。

Answer 1

不必再抓取元素，可以直接添加侦听器

​

const element = document.createElement('div')
element.style.background = 'red'
element.style.width = '100px'
element.style.height = '100px'
element.addEventListener('click', () => console.log('click'))
document.body.appendChild(element)

​

这应该是可行的：

function placePieces() {
  for (var i = 0; i < setup.length; i++) {
    if ((setup[i]+'' == "undefined")) {continue;}
    var element = document.createElement("img");
    // ...
    element.addEventListener("click",highlight);
  }
}