0

我的代码中有动态document.createElement。我想添加addEventListener - onclick到所有<div>创建的。我面临的问题是所有 onclick 事件从我的数组返回的最后一个结果。

var table = [
                [ "H", "Hydrogen", "1.00794", 1, 1 ],
                [ "He", "Helium", "4.002602", 18, 1 ],
                [ "Li", "Lithium", "6.941", 1, 2 ],
                [ "Be", "Beryllium", "9.012182", 2, 2 ],
            ]; 

for ( var i = 0; i < table.length; i ++ ) {

        var item = table[ i ];


        var element = document.createElement( 'div' );
        element.setAttribute("id", "element_"+i);
        element.className = 'element';
        element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
        element.style.cursor = 'pointer';
        element.addEventListener("click", function(e){ alert(item[0]); });
}

当我点击任何 div 时，它只会提醒我“Be”，这是我数组中的最后一个结果。我应该如何将事件处理程序添加到每个特定的<div>. 我尝试过，bind但是当我单击时不会显示警报框，并且它没有显示任何错误消息。

4

1 回答 1

3

这是因为闭包变量的错误使用item

var table = [
    [ "H", "Hydrogen", "1.00794", 1, 1 ],
    [ "He", "Helium", "4.002602", 18, 1 ],
    [ "Li", "Lithium", "6.941", 1, 2 ],
    [ "Be", "Beryllium", "9.012182", 2, 2 ]
]; 

for ( var i = 0; i < table.length; i ++ ) {
    (function(idx){
        var item = table[ idx ];
        var element = document.createElement( 'div' );
        element.setAttribute("id", "element_"+idx);
        element.className = 'element';
        element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
        element.style.cursor = 'pointer';
        element.addEventListener("click", function(e){ 
            alert(item); 
        });
    })(i)

}

在这种情况下，事件回调试图访问闭包变量item，但item直到单击事件执行后才会评估 的值，此时 item 的值已更改。

于 2013-07-09T06:52:31.027 回答