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ます。thisid

TextField.onkeyup = function() {doSomething(this.id);};
于 2013-07-23T23:37:46.930 に答える
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 に答える