当不断追加行时，jQuery 在表正文的最后一个 TR 中发生的输入中键控时触发事件

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>

我想做的是向表中添加行。每当光标位于表底行中发生的输入中时发生键下事件时，我都想这样做。

所以我做了一些javascript：

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

        });

这在一定程度上起作用，因为它添加了行。问题是键控事件与表的第一行保持绑定。这不是想要的，而是我希望将事件绑定到新附加的行，该行将是表的底行。

有谁知道我做错了什么？如何解决？

编辑：

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

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()（将被弃用）或on() jquery 函数。

你的脚本应该是这样的：

$('#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');
  });