jquery - 使用 jQuery 追加新行和输入标签

Question

我有一个 Web 应用程序，它也设置为使用 Enter 键导航其输入字段。此外，我的表单中有一个控件，可以将新行 append 到包含我的输入字段的表中。

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

这就是我用来 append 包含输入字段的新行的方法。

$('#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 时，光标的位置就会从当前字段更改到下一个字段。但是当我追加新行及其输入字段时，从第六行开始不会发生任何事情。甚至，使用我之前的代码也无法获取 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!');
});