Question

如果我使用循环创建大量HTML元素，比如

for (i= 1; i < 100; i++) {
    var my_element = document.createElement ("td");
    row.appendChild (my_element);
    my_element.onclick = function () {my_function (i));
}

然后单击该元素时，传递给my_function的i的值始终为100，无论调用它的是哪个数字元素。我通过使用

解决了这个问题

my_element.id = "something"+i;
my_element.onclick = function (e) {my_function (e.target.id)};

（对于Internet Explorer，target显然需要srcElement。）我很想知道是否有任何方法可以创建函数而无需像这样添加ID到元素此

Answer 1

i的值随循环的每次迭代而变化。 You need a closure to capture the value of i：

(function(i) {
    my_element.onclick = function () {my_function (i)};
}(i))

Answer 2

如果你编写了一个为你构建处理函数的函数，你可以使用新的作用域来确保你得到你想要的数字。例如：

function BuildHandler (i) { return function () { alert(i); };

for (i= 1; i < 100; i++) {
    var my_element = document.createElement ("td");
    row.appendChild (my_element);
    my_element.onclick = BuildHandler(i);
}

Answer 3

如果我是你，我将使用Jquery（或原型或任何可用的js框架）

在每个元素上你应该添加像myid这样的属性，这样当你点击它时就可以重新点击它。

for(i=1; i ++ ; i<100){
   var myelement = "<td myid='something"+i+"' class='myTD'></td>" ;
   row.append(myelement);
}

.... 

$(document).ready(function(){
  $('.myTD').click(function(){
     var id = $(this).attr('myid');
     my_function(id);
  });

});

我在我的网络应用上做了这个技巧：）

将值传递给onclick

3 个答案: