JQuery表单元素克隆异常：克隆按钮单次点击触发多次克隆求助

这个问题的核心原因是重复绑定事件处理函数：你每次克隆表单后，都会给新克隆出来的.add-more和.remove按钮再次绑定clone和remove函数，加上克隆操作会复制原元素上已有的事件绑定，导致点击一次按钮会触发多次克隆操作。

解决这个问题最简洁可靠的方式是使用事件委托——只在固定的父元素（比如.search容器）上绑定一次事件，而不是给每个按钮单独绑定。这样不管是初始的还是克隆出来的按钮，点击时事件都会冒泡到父元素，由父元素统一处理，完全避免重复绑定的问题。

修改后的完整代码如下：

JavaScript 代码 #

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".searchForm").length;

function clone(e) {
  e.preventDefault(); // 防止按钮潜在的默认行为，更稳妥
  var $originalForm = $(this).parents(".searchForm");
  var $newForm = $originalForm.clone()
    .appendTo(".search")
    .attr("id", "searchForm" + cloneIndex);
  
  // 更新新表单内元素的ID
  $newForm.find("*").each(function() {
    var id = this.id || "";
    var match = id.match(regex) || [];
    if (match.length === 3) {
      this.id = match[1] + cloneIndex;
    }
  });
  
  cloneIndex++;
}

function remove(e) {
  e.preventDefault();
  // 至少保留一个表单，避免全部删光影响功能
  if ($(".searchForm").length > 1) {
    $(this).parents(".searchForm").remove();
  }
}

// 使用事件委托，绑定到固定的父元素.search上
$(".search").on("click", "button.add-more", clone);
$(".search").on("click", "button.remove", remove);

HTML 代码（无需修改，保持原样） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="searchServlet">
  <div class="search">
    <table id="searchForm1" class="searchForm">
      <tr>
        <td>SELECT TABLE*:</td>
        <td>
          <div class="searchDropdown">
            <select name="table[]" class="table" id="table" onchange="change(this);">
              <option>---Select Table---</option>
              <option value="something">Something</option>
            </select>
          </div>
        </td>
      </tr>
      <tr>
        <td>SELECT COLUMN*:</td>
        <td>
          <div class="searchDropdown">
            <select name="column[]" id="column">
              <option>---Select Table First---</option>
            </select>
          </div>
        </td>
      </tr>
      <tr>
        <td>CONDITION:</td>
        <td><input type="text" name="condition[]" id="condition" placeholder="Condition" /></td>
      </tr>
      <tr>
        <td>
          <button class="searchFormBtn add-more" type="button">Add</button>
          <button class="searchFormBtn remove" type="button">Remove</button>
        </td>
      </tr>
    </table>
  </div>
  <p id="importantNote">*Compulsory fields.</p>
  <p>
    <input id="submitQuery" type="submit" value="Query" />
  </p>
</form>

关键改动说明 #

• 移除克隆时的重复事件绑定：不再在clone函数里给新表单绑定点击事件，从根源避免重复绑定的问题。
• 改用事件委托：把点击事件绑定到固定的.search容器上，通过第二个参数指定触发事件的目标按钮，所有动态生成的按钮都能被正确监听。
• 添加表单数量保护：在删除函数里限制至少保留一个表单，防止用户误删所有表单导致功能无法使用。
• 增加默认行为拦截：给事件处理函数加上e.preventDefault()，避免潜在的意外行为。

这样修改后，不管点击哪个Add按钮，都只会触发一次克隆操作，完美解决你的问题！

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