Question

我有一个动态生成的表，除了onclick事件外，它的效果很好。我把结果发送到警报，你可以看到。我期望它在每次迭代时显示var i的正确值，但每次迭代每次显示相同的值3，而不是像我期望的那样显示0,1,2。我做错了什么，还是有更好的方法来实现onclick事件？

注意：请不要jquery

<html>
<head></head>
<script>
function test(x){
    alert(x);
}
</script>
<body>

<div id="main">
</div>

<script>
var backupData = [];
//SAMPLE DATA
backupData.push(['dan','martin']);
backupData.push(['nancy','smith']);
backupData.push(['mary','fisher']);


tbl  = document.createElement('table');
for(var i = 0; i < backupData.length; i++){
    var tr = tbl.insertRow();
    tr.onclick = function(){test(i)};

    var td = tr.insertCell();
    td.appendChild(document.createTextNode(backupData[i][0]));

    var td2 = tr.insertCell();
    td2.appendChild(document.createTextNode(backupData[i][1]));

}
main.appendChild(tbl);
</script>

</body>
</html>

Answer 1

关闭的经典问题

解决方案1：

for(var i = 0; i < backupData.length; i++){
    var tr = tbl.insertRow();
    tr.onclick = (function(value){
      //captures local value of i as value parameter
      return function(){
         test(value)
      }
    })(i);

解决方案2：

//given backupDate is an array (if a map use Object.keys(backupData)
backupData.forEach(function(i){
    var tr = tbl.insertRow();
    tr.onclick = function(){test(i)};
})

javascript动态生成的表，onclick事件无法正常工作

1 个答案: