我有一个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
}
怎么回事?
答案 0 :(得分:2)
如果您使用的是jQuery 1.7+,请改用on
或delegate
。它比旧方法更有效。在这里,我监视表格单元格上的点击事件。当事件发生时,我将clicked!
添加到表格单元格。这适用于初始表格单元格和添加的单元格。
$('#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。