javascript - 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;
}

動的な行をクリックすると、アラート ボックスの出力は常に 0、1、.. ではなく「5」になります。

onclick イベントを割り当てる適切な方法を知っている人はいますか?

前もって感謝します！

Answer 1

クロージャーパワーを使用する必要があります：

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

デモ: http://jsfiddle.net/zvPfZ/