使用jQuery追加新行和输入标记

时间:2011-12-17 06:39:49

标签: jquery append

我有一个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
}

怎么回事?

3 个答案:

答案 0 :(得分:2)

如果您使用的是jQuery 1.7+,请改用ondelegate。它比旧方法更有效。在这里,我监视表格单元格上的点击事件。当事件发生时,我将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!');
});

答案 1 :(得分:0)

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

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

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

});

如果此解决方案不起作用,请评论我编辑

祝你好运,阿里

答案 2 :(得分:0)

最后,我可以使用Ali和Mrtsherman的建议解决我的问题。

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

谢谢Ali和Mrtsherman。