[英]How to Clone fieldset inside of a Cloned fieldset jQuery
我需要在克隆的fieldset中克隆一个fieldset。
所以我的常规结构就像
当我点击add new agenda field
它成功地克隆了更大的字段
但是当我点击add new file
它只会向父字段添加新字段而不是当前字段
我的代码就像
<div id="agenda_placeholder">
<div id="agenda_template">
<fieldset>
<legend>Agenda Details</legend>
<ol>
<li>
<label for=topic_name>Topic Name</label>
<input id=topic_name name=topic_name type=text placeholder="ACAT Briefing" required autofocus>
</li>
<li>
<label for=topic_time>Time</label>
<input id=topic_time name=topic_time type=text placeholder="2.00 - 2.30 ">
</li>
<li>
<label for=presenter>Presenter</label>
<input id=presenter name=presenter type=text placeholder="Name LastName">
</li>
<li>
<div id="file_placeholder">
<div id="file_template">
<fieldset>
<legend>File Details</legend>
<ol>
<li>
<label for=file_description>File Description</label>
<input id=file_description name=file_description type=file_description placeholder="Ex. Weather Stats">
</li>
<li>
<label for=file_name>File Name</label>
<input id=file_name name=file_name type=file_name placeholder="Exact file name Eg:weather.docx">
</li>
</ol>
</div> <!-- file_template -->
</div> <!-- file_placeholder -->
<button type="button" name="AddNewFile" onclick="Add();">Add New File</button>
</fieldset>
</li>
</ol>
</div> <!-- agenda_template -->
</div> <!-- agenda_placeholder -->
<button type="button" name="AddNewAgenda" onclick="Add_Agenda();">Add New Agenda Field</button>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("file_template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("file_placeholder").appendChild(oClone);
}
function Add_Agenda() {
_counter++;
var oClone = document.getElementById("agenda_template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("agenda_placeholder").appendChild(oClone);
}
那么如何克隆克隆字段集中的字段集呢?
首先,你的HTML无效,标签重叠
在你的add
函数中,语句document.getElementById(“file_placeholder”)将返回id file_placeholder
的第一个匹配,这是不正确的。
你需要的是知道点击了哪个按钮并克隆其父div并将克隆的div附加到按钮的祖父素div。
相同的逻辑可以应用于Add_agenda
但您应该注意删除添加的文件到您正在克隆的议程。
function Add(btn) {
_counter++;
var parentFileTemplate = $(btn).parent("div");
parentFileTemplate.attr('id',"file_template" + _counter );
var parentFilePlaceHolder = parentFileTemplate.parent();
cloned = parentFileTemplate.clone();
cloned.attr('id',"file_template" + _counter );
parentFilePlaceHolder.append(cloned);
}
还必须添加this
调用函数时的参数:
<button type="button" name="AddNewFile" onclick="Add();">
将会:
<button type="button" name="AddNewFile" onclick="Add(this);">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.