聚焦表格最后一行元素时动态新增行的jQuery问题解决

这个问题我遇见过，核心原因是事件绑定的时机问题：你一开始直接给初始存在的.ankita元素绑定了focus事件，但动态克隆出来的新行输入框是后续才添加到DOM中的，初始的事件绑定并没有覆盖到这些动态生成的元素。

要解决这个问题，我们需要用事件委托（Event Delegation）——把事件绑定到一个始终存在的父元素上，让它监听子元素的事件触发，这样不管子元素是初始就有的还是后来动态生成的，都能触发对应的逻辑。

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell1</p>
      </td>
      <td>
        <p>Cell2</p>
      </td>
    </tr>
    <tr class="trbar">
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <input class="ankita" type="text" />
      </td>
    </tr>
  </tbody>
</table>

<script>
// 改用事件委托，绑定到表格（始终存在的父元素）
$('#tbl').on('focus', '.ankita', function(){
  var $tr = $(this).closest('.trbar');
  var $clone = $tr.clone();
  $clone.find(':text').val(''); // 清空克隆行的输入框内容
  $tr.after($clone);
  $(this).removeClass("ankita"); // 移除当前输入框的类，防止重复触发
});
</script>

关键改动说明 #

• 把原来的$('.ankita').focus(...)改成了$('#tbl').on('focus', '.ankita', ...)：将事件绑定到表格这个父元素上，通过第二个参数.ankita指定要监听的目标子元素，这样所有符合选择器的子元素（包括动态生成的）触发focus事件时，都会执行回调逻辑。
• 其他逻辑保持不变：克隆行、清空输入框、移除当前元素的.ankita类，避免同一行重复触发新增操作。

这样修改后，不管是初始的最后一行，还是后续新增的行，只要聚焦输入框，都会复制该行并追加到表格末尾啦~

内容的提问来源于stack exchange，提问作者Ankita