Question

我的代码中有一个动态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但是当我点击时警报框不会显示，并且它没有显示任何错误消息。

Answer 1

这是因为闭包变量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，但是在执行click事件之前不会评估item的值，到那时item的值被更改

动态addeventlistener onclick仅返回数组的最后结果

1 个答案: