javascript - 使用 JavaScript 中的新 dom 元素更新 for 循环

Question

我想将鼠标事件添加到 .piece 类中，即使 div 是在 DOM 加载后创建的。

这是我的实际循环:

var piece = document.getElementsByClassName('piece');

function theLoop() {
  for(var i=0; i<piece.length; i++) {
    piece[i].addEventListener("mousemove", function(event) {
      //do stuff
    }
  }
}

theLoop();

它工作正常，但如果我在加载 DOM 后添加带有类 .piece 的新 div，循环会忽略它们。

我使用 .cloneNode() 和 .appendChild() 添加这些新的 div，如下所示:

function createPiece(symbol, name) {
  var clone = document.getElementById(symbol).cloneNode(true);
  clone.setAttribute('id',symbol+'-'+name);
  document.getElementById(name).appendChild(clone);
}

createPiece(symbol, name);

所有原始克隆的 div 都有类 .piece。

如何将这些新的 div 添加到我的 for 循环中，并附加鼠标事件？

谢谢。

Answer 1

如果您的循环在页面加载时运行，则无法使其考虑之后动态添加到 DOM 的元素。通常，event delegation这将是一个解决方案，但对于 mousemove 事件来说这不是一个好的解决方案(因为它经常触发)。

您可以做的是创建一个函数，将事件处理程序添加到传递的元素中。然后，您可以从当前循环中调用该函数，并在将每个新元素添加到 DOM 后再次调用它。