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

你应该使用the closure power:

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

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