jQueryを使用して新しい行と入力タグを追加します

Question

Enterキーを使用して入力フィールドをナビゲートするように設定されたWebアプリケーションがあります。さらに、私のフォームには、入力フィールドを含むテーブルに新しい行を追加するコントロールがあります。

<select name="more" id="more" style="width:50px"> 
    <option value="0">0</option> 
    <option value="5">5</option> 
    <option value="10">10</option> 
    <option value="20">20</option> 
</select> 

これを入力フィールドを含む新しい行の追加に使用しました。

$('#more').change(function(e) { 
    var current_rows = ($('#myTable tr').length)-1; 
    current_rows = parseInt(current_rows); 
    var more = $('#more').val(); 
    more = parseInt(more); 
    if (more != '0') { 
     for (i = current_rows+1 ; i <= current_rows+more ; i++) { 
      // rows HTML tags here as content 
      $('#myTable tr:last').after(content); 
     } 
    } 
    $('#more').val('0'); 
}); 

初めて5行があるとします。 Enterキーを押すと、カーソルは現在のフィールドから次のフィールドに移動します。しかし、新しい行とその入力フィールドを追加すると、6行目から何も起こりません。さらに、前のコードを使用してEnterのキーコードを取得することはできません。

if (event.keyCode == 13) { 
// do something 
} 

何が問題なのですか？

Answer 1

jQuery 1.7以降の場合は、代わりにonまたはdelegateを使用してください。古い方法より効率的です。ここでは、テーブルセルのクリックイベントのテーブルを監視します。イベントが発生すると、clicked!をテーブルセルに追加します。これは、最初の表のセルと追加された表のセルの両方で機能します。

http://jsfiddle.net/WBxQz/1/

$('#more').change(function(e) { 
    for (var i = 0; i < $(this).val(); i++) { 
     $('#myTable').append('<tr><td></td></tr>'); 
    } 
}); 

$('table').on('click', 'td', function() { 
    $(this).html('clicked!'); 
}); 

Answer 2

私はそれ

を編集するために私にコメント、あなたはこのソリューションが動作しなかった場合のjQueryの「ライブ」の方法はあなたに

$("#myTable tr").live("keypress",function (e){ 

if(e.keyCode == 13) 
    //Do somthing 

}); 

を助けることができるDOM .Maybe動的にあなたに他の行をロードするので、それがあると思います

幸運にも、Ali

Answer 3

最後に、私はアリのとmrtshermanの提案を使用して私の問題を解決することができます。

$("#myTable").delegate("input","keypress",function(e) { 
    // do something 
}) 

ありがとうアリとMrtsherman。