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。但是，textfield中的值是正确的。

Answer 1

非常常见的问题。更改keyup处理程序：

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

（摆脱“For FF”系列;根本不需要。）

如果你不以某种方式引入新的词法范围，那么你的所有事件处理程序都将引用完全相同的“textboxCount”变量。通过执行上面显示的内容（以及变体），您可以确保每个事件处理程序都有自己的计数器私有副本，就像创建处理程序时一样。

Answer 2

由于您希望在其自己的事件处理程序中获取元素的id，因此只需引用this.id即可绕过整个闭包问题，其中this是元素，id是其{{1属性

id

Answer 3

你可以使用你在游戏中使用的jQuery库：

$('#addFields').on('click', function () {
    var thisId = $('.foo').length + 1;
    var TextField = '<input type="text" name="textbox" class="foo" value="' + thisId + '" id="textbox' + thisId + '">';
    jQuery(TextField).appendTo('#TextfieldList');
});
$('#TextfieldList').on('keyup', '.foo', function () {
    doSomething($(this).attr('id'));
    // or 
    doSomething(this.id);
});
function doSomething(id){
    alert(id);
}

示例jsFiddle：http://jsfiddle.net/mHT7Z/

动态创建的表单字段保持具有相同的ID

3 个答案: