我正在尝试使用Jquery来克隆多个表单元素。第一个克隆按钮将工作并成功克隆元素ONCE。但是,克隆元素中的克隆按钮将在单击中多次克隆元素。我需要这些按钮才能工作,只需克隆元素一次。我的代码如下。请帮忙。提前谢谢!
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>
答案 0 :(得分:0)
那是因为您尝试使用已绑定的按钮克隆表单部分。
只需将事件绑定移到克隆功能之外。
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();
}
&#13;
<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>
&#13;