使用 jQuery 追加新行和输入标签答案

【问题标题】：append new rows and input tags using jQuery使用 jQuery 追加新行和输入标签
【发布时间】：2011-12-18 02:05:38
【问题描述】：

我有一个 Web 应用程序，它也设置为使用 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
}

怎么了？

【问题讨论】：

你能发布更多代码吗？

标签： jquery append

【解决方案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!');
});

【讨论】：

【解决方案2】：

我认为这是因为您将其他行动态加载到您的 DOM 中。也许 Jquery 的“Live”方法可以帮助您

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

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

});

如果这个解决方案不起作用，请评论我编辑它

祝你好运，阿里

【讨论】：

从 jQuery 1.7 开始，live 已弃用。也不推荐用于 jQuery 1.4.2 或更高版本。你应该改用delegate。
我确定原因就是你所说的。但是您的代码无法解决它。
你是用delegate代替live方法吗？
谢谢 Ali 和 mrtsherman。您的回答帮助我解决了这个问题。最后我可以使用下面的代码做我需要的事情： $("#myTable").delegate("input","keypress",function(e) { // do something });
按照 mrtsherman 的说法，live is deprecated 很酷！乐于助人:)

【解决方案3】：

我终于可以使用 Ali 和 mrtsherman 的建议解决我的问题了。

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

谢谢 Ali 和 Mrtsherman。

【讨论】：