追加 TR 并将焦点更改到新的 tr 输入字段

Question

我正在创建一个带有 table 的表单，它将与条形码扫描仪一起使用。 table 行将从一行开始，每次使用扫描仪时，首先会创建一个新行，然后焦点会落到新创建行的特定输入。（基本上跳过了起始行上存在的其他输入）。

我找到了一个类似的主题并走到了这一步，但我无法既创建新行又移动到新行以在一个额外的行之外一起工作。我可以使用委派，但这会中断将焦点移至下一行的输入...

<table id="table1">
 <tr>
   <td><input class="bcode" type="text" name="S1" autofocus/></td>
   <td><input class="b" type="text" name="S2" /></td>
   <td><input class="c" type="text" name="S3" /></td>
 </tr>
</table>

$('#table1').find('.bcode').keypress(function(e){ 
   if ( e.which == 13 ){
    $('<tr><td><input class="bcode" type="text" name="S1" /></td><td><input class="b" type="text" name="S2" /></td><td><input class="c" type="text" name="S3"/></td></tr>').appendTo('#table1');
    $(this).parent().parent().next('tr').find('.bcode').focus();
    return false; 
   } 
});

Fiddle

Answer 1

对于附加到动态 DOM 元素的事件，您应该使用 .on()。那么：

$(document).on("keyup", ".bcode",(function(e){ //code }));

收听新创建的 .bcode 元素。

你可以用这个限制.bcode个元素：

$("#table1").on("keyup", ".bcode",(function(e){ 
 //code
}));

完整示例在这里：https://jsfiddle.net/x17r6nf3/3/

Answer 2

您可以在此处使用 .on() 将事件附加到现有的 table 并将其委托给输入时的按键。

$('#table1').on('keypress', '.bcode', function(e) {
  if ( e.which == 13 ) // Enter key = keycode 13 
  { 
    $('<tr><td><input class="bcode" type="text" name="S1" /></td><td><input class="b" type="text" name="S2" /></td><td><input class="c" type="text" name="S3" /></td></tr>').appendTo('#table1');
    //console.log($(this).next('.bcode'));
    $(this).parent().parent().next('tr').find('.bcode').focus();
    return false;
  } 
});

见附件fiddle。 https://jsfiddle.net/pmewsqLn/

追加 TR 并将焦点更改到新的 tr 输入字段

Append TR AND change focus to new tr input field

javascript

jquery

keypress