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 回答