JavaScript 在动态创建的 DOM 对象上动态设置 DOM 对象事件

Question

以下脚本：

var containerDIV = document.getElementById("sampleContainer");
for(var i = 0; i < 5; i++)
{
    var dynamicDIV = document.createElement("div");
    containerDIV.appendChild(dynamicDIV);   
    dynamicDIV.onclick = function() { alert(i); };
    dynamicDIV.innerHTML = "Row: " + i;
}

单击动态行时，警报框中的输出将始终为"5"而不是 0、1、.。

有谁知道分配onclick事件的正确方法？

Answer 1

你应该使用闭包功率：

for (var i = 0; i < 5; i++) {
    (function(i) {
        dynamicDIV.onclick = function() {
            alert(i);
        };
    })(i);
}

演示：http://jsfiddle.net/zvPfZ/