добавлять новые строки и входные теги, используя jQuery

Question

У меня есть веб-приложение, которое также настроило навигацию по полям ввода с помощью клавиши Enter. Кроме того, в моих формах есть элемент управления, который добавляет новые строки в таблицу, содержащую мои поля ввода.

<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

Наконец-то я смог решить свою проблему, используя предложения Али и Мртшермана.

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

Спасибо, Али и Мрцерман.

Answer 3

Я думаю, это потому, что вы динамически загружаете другие строки в свой DOM. Возможно, «живой» метод Jquery может помочь вам

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

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

});

, если это решение не сработало, прокомментируйте меня, чтобы отредактировать его

Удачи, Али