jQuery克隆表单最后一行异常：有时多次克隆问题求助

首先来看你的代码场景：

<script>
$('#driver_button').click(function () {
  $('form > .driver_row:last').clone().insertAfter('form > .driver_row:last');
});
</script>
<form>
  <div class="row driver_row">...</div>
  <div class="row driver_row">...</div>
  <div class="row driver_row">...</div>
  <button id="driver_button" type="button">添加司机行</button>
  <div class="row">
    <input type="submit" name="commit" value="Save">
  </div>
</form>

你遇到的“有时正常、有时多次克隆”的问题，核心原因几乎都是按钮的点击事件被重复绑定了，具体分两种常见情况：

常见触发原因 #

• 脚本被重复执行：比如你的这段JS代码被放在了会重复渲染的模板片段里，或者页面通过AJAX动态加载内容时，这段脚本被多次加载执行。每执行一次$('#driver_button').click(...)，就会给按钮新增一个点击处理函数，点击一次就会触发N次克隆（N就是绑定的次数）。
• 动态元素重复绑定：如果你的表单是通过AJAX动态插入到页面中的，你在页面初始加载时绑定了一次事件，之后表单重新渲染时又绑定了一次，就会出现重复绑定的情况。

解决方法 #

1. 先解绑再绑定（快速修复） #

在绑定新的点击事件前，先移除按钮上已有的所有click事件绑定，确保每次只有一个处理函数生效：

$('#driver_button').off('click').click(function () {
  $('form > .driver_row:last').clone().insertAfter('form > .driver_row:last');
});

2. 使用事件委托（推荐，适配动态场景） #

把事件绑定到静态的父元素（比如form本身），而不是直接绑定到按钮上。这种方式只会绑定一次，而且不管按钮是初始就存在还是动态生成的，都能正常触发：

$('form').on('click', '#driver_button', function () {
  // 用closest找到当前按钮所在的表单，避免页面有多个表单时出错
  const $targetForm = $(this).closest('form');
  $targetForm.find('.driver_row:last').clone().insertAfter($targetForm.find('.driver_row:last'));
});

3. 确保脚本只执行一次 #

检查你的页面结构：

• 把这段JS代码放在页面的</body>标签之前，避免在模板循环或AJAX回调中重复引入。
• 如果用模块化开发（比如ES6模块），确保这段代码只在一个模块中执行，不会被多次导入。

额外优化建议 #

克隆行的时候，记得清空里面的表单元素值，避免克隆出和原行内容完全一致的行，提升用户体验：

$targetForm.find('.driver_row:last').clone()
  .find('input, select, textarea').val('').end() // 清空表单元素
  .insertAfter($targetForm.find('.driver_row:last'));

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