克隆项目克隆按钮将导致多个项目被克隆

Question

我正在尝试使用Jquery来克隆多个表单元素。第一个克隆按钮将起作用，并成功克隆元素一次。但是，克隆元素中的克隆按钮将在一次单击中多次克隆元素。我需要这些按钮工作相同，只克隆一次元素。我的代码如下。请帮帮忙。提前感谢！

​

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

function clone() {
    $(this).parents(".searchForm").clone()
        .appendTo(".search")
        .attr("id", "searchForm" + cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.add-more', clone)
        .on('click', 'button.remove', remove);
    cloneIndex++;
}

function remove() {
    $(this).parents(".searchForm").remove();
}
$("button.add-more").on("click", clone);

$("button.remove").on("click", remove);

<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>

​

Answer 1

这是因为您正在尝试克隆带有按钮的窗体部件，这些按钮已经绑定。

只需将事件绑定移出克隆函数即可。

​

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

$('.search').on('click', 'button.add-more', clone);
$('.search').on('click', 'button.remove', remove);

function clone() {
  $(this).parents(".searchForm").clone()
    .appendTo(".search")
    .attr("id", "searchForm" + cloneIndex)
    .find("*")
    .each(function() {
      var id = this.id || "";
      var match = id.match(regex) || [];
      if (match.length == 3) {
        this.id = match[1] + (cloneIndex);
      }
    })
  cloneIndex++;
}

function remove() {
  $(this).parents(".searchForm").remove();
}

<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>

​