jquery - 当连续追加行时，在表体的最后一个 tr 中发生的输入中的 keydown 触发事件

Question

我有这张桌子：

<table id="myTable">
  <thead>
    <tr>
      <th>FirstName</th>
      <th>LastName</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="firstname" /></td>
      <td><input type="text" class="lastname" /></td>
    </tr>
  </tbody>
</table>

我想要做的是向表中添加行。当光标位于表格底部行中的输入中时，每当发生 keydown 事件时，我都想执行此操作。

所以我做了一些javascript：

$('#myTable tbody tr:last td input').keydown(function (e) {

  $('#myTable tbody tr:last').clone().appendTo('#myTable');



        });

这在一定程度上起作用，因为它添加了行。问题是 keydown 事件仍然与表格的第一行相关联。这不是想要的，而是我希望将事件绑定到新附加的行，这将是表格的底行。

有谁知道我做错了什么？怎么修？

编辑：

我应该提到抱歉的是，我希望它只适用于新添加的行，而不适用于其他行。

Answer 1

你可以这样做：

$(document).on('keydown','#myTable tbody tr:last td input',function (e) {

    $('#myTable tbody tr:last').clone().appendTo('#myTable');

  });

在这里提琴

Answer 2

为像这样动态添加的元素委托最近的静态元素

$('#myTable tbody').on('keydown','tr:last td input',function (e) {

演示

Answer 3

您需要为新创建的 DOM使用live()（将被弃用）或jquery 函数。on()

你的脚本应该是这样的：

$('#myTable tbody tr:last td input').on('keydown',function (e) {

  $('#myTable tbody tr:last').clone().appendTo('#myTable');

 });

或者

$('#myTable tbody tr:last td input').live('keydown', function (e) {

  $('#myTable tbody tr:last').clone().appendTo('#myTable');

  });