1

我使用这行代码向我的页面动态添加了一些文本字段：

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。文本字段中的值是正确的。

4

3 回答 3

2

由于您想在其自己的事件处理程序中获取元素的 id，您可以通过仅引用来绕过整个关闭问题，元素this.id在哪里this，id 是它的id属性

TextField.onkeyup = function() {doSomething(this.id);};
于 2013-07-23T23:37:46.930 回答
2

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

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

（去掉“For FF”这一行；根本没有必要。）

如果您不以某种方式引入新的词法范围，那么您的所有事件处理程序都将引用完全相同的“textboxCount”变量。通过执行我上面显示的操作（并且存在变体），您可以确保每个事件处理程序都拥有自己的计数器的私有副本，因为它在创建处理程序时所处的位置。

于 2013-07-23T23:29:56.783 回答
0

你可以只使用你在玩的 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/

于 2013-07-23T23:55:24.857 回答