javascript - 动态创建的表单字段保持相同的 ID

Question

我使用这行代码将一些文本字段动态添加到我的页面:

var textboxCount = 0;

$('#addFields').on('click', function(){

var TextField = document.createElement("input");

TextField.setAttribute("type", "text");
TextField.setAttribute("value", textboxCount);
TextField.setAttribute("name", "textbox");
TextField.setAttribute("class", "foo");
TextField.setAttribute("id", "textbox" + textboxCount);
TextField.setAttribute('onkeyup','doSomething('+textboxCount+');'); // for FF
TextField.onkeyup = function() {doSomething(textboxCount);}; // for IE

jQuery('#TextfieldList').append(eleText);
textboxCount += 1; //Increment the count

});

现在我需要此函数中字段的唯一 ID:

function doSomething(id){
    alert(id);
}

但是当我调用该函数时，我总是在每个添加的字段中获得相同的 ID。不过，文本字段中的值是正确的。

Answer 1

非常普遍的问题。更改 keyup 处理程序:

TextField.onkeyup = function(textboxCount) {
  return function() {
    doSomething(textboxCount);}; // for IE
  };
}(textboxCount);

(删除“For FF”行；根本没有必要。)

如果您不以某种方式引入新的词法作用域，那么您所有的事件处理程序都将引用完全相同的“textboxCount”变量。通过执行我上面显示的操作(并且有变体)，您可以确保每个事件处理程序都有其自己的计数器的私有(private)副本，就像它在创建处理程序时所处的那样。