子 div onclick 事件：动态添加的子 div 上的 onclick 无法按预期工作答案

【问题标题】：Child div onclick event: onclick on dynamically added children divs doesn't work as intended子 div onclick 事件：动态添加的子 div 上的 onclick 无法按预期工作
【发布时间】：2023-04-09 08:27:01
【问题描述】：

我有一个父 div，我在其中循环添加子 div。对于每个孩子，我尝试添加一个 onclick 事件 - 这样子 div 在单击时会改变其颜色：

    var div;
    for (var i=1; i<=size*size; i++)  {
        div = document.createElement("div");
        div.id = i;
        div.style.width = 480/size + "px";
        div.style.height = 480/size + "px";

        div.onclick= function()  {
            div.style.backgroundColor="orange";
        }
        resultNode.appendChild(div);
    }

然而，只有最后一个 div 改变了它的颜色，不管点击什么孩子。我怀疑它是因为var div 的最后一个值是最后一个孩子，但是添加到其先前对象的onclick 不应该在将它们添加到resultNode 中后保留在这些对象中吗？

我也尝试添加这个循环：

    var children=resultNode.children;
    for (var i=0; i<children.length; i++)  {
        children.item(i).onclick = function()  {
            children.item(i).style.backgroundColor="blue";
            alert(i);
        }
    }

但是，它仅适用于索引不同的单个孩子，具体取决于孩子的数量。如果只有25（代码中size*size 的值）子级，则索引为6 的子级将着色。如果有100 孩子，则11th 孩子将被着色，如果有400 孩子，21th 孩子将被着色。这始终是第二行的第二个 div（size*size div 与size 行和size 列形成一个正方形，这意味着着色的 div 位于size+1 位置）：

我不明白这种行为。为什么会发生这种情况，我应该如何编辑代码以获得所需的结果（单击时任何子 div 都会更改其颜色）？

【问题讨论】：

解释sn-ps不工作的原因in this post.

标签： javascript html css

【解决方案1】：

div 没有引用您在click 处理程序中所期望的内容，请参阅JavaScript closure inside loops – simple practical example。您可以使用event.target 来引用调度事件的元素

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  div.id = i;
  div.textContent = i;
  div.onclick = e => e.target.style.backgroundColor = "orange";
  resultNode.appendChild(div);
}

&lt;div id="resultNode"&gt;&lt;/div&gt;

或者

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  ((div) => {
    div.id = i;
    div.textContent = i;
    div.onclick = e => div.style.backgroundColor = "orange";
    resultNode.appendChild(div);
  })(div)
}

&lt;div id="resultNode"&gt;&lt;/div&gt;

【讨论】：

注意，由于使用let div 将与onclick 处理程序中的第一个示例中的div 相同。
谢谢。来自 Java，Javascript 很难。将函数存储在数组中，像i 这样的原语似乎被传递是引用而不是值。令人兴奋。

【解决方案2】：

如果您按以下方式调整代码，您的代码也可以工作：

var div;
    for (var i=1; i<=size*size; i++)  {
        div = document.createElement("div");
        div.id = i;
        div.style.width = 480/size + "px";
        div.style.height = 480/size + "px";

        div.onclick= function()  {
            this.style.backgroundColor="orange";
        }
        resultNode.appendChild(div);
    }

在 onclick 函数中只需将其更改为 this.style.background = 'orange' 而不是 div.style.background = 'orange' 对象。您的代码不起作用，因为 div 对象指向您的最后一个 div。

【讨论】：