如何在jQuery克隆的fieldset内部克隆一个fieldset

Question

如何在jQuery克隆的fieldset内部克隆一个fieldset

jqueryhtmlclone

3

我需要克隆一个已经克隆的fieldset中的fieldset。

我的常规结构如下：

enter image description here

当我点击 添加新议程 时，它会成功地克隆更大的字段，如下所示：

enter image description here

但是当我点击 添加新文件 时，它只会将新字段添加到父字段而不是当前字段

enter image description here

我的代码如下：

<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);
}

那么如何在克隆的 fieldset 内部克隆一个 fieldset 呢？

- Mord Fustang

1

兄弟，听说你对克隆很感兴趣，但是有什么问题吗？ - Johan

我猜是由于 div 标签的原因，当我点击添加文件时，它只会将文件字段添加到父字段集中，请查看最后一张图片。 - Mord Fustang

嗯，首先，HTML 似乎无效。请查看红色标签：http://jsfiddle.net/BQDRJ/ - Johan

您正在克隆具有“id”的元素。这将在您的页面上导致重复的“id”，这是无效的。在页面上，“id”应始终是唯一的，因为它们唯一地标识一个元素。 - James Montagne

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akram Berkawy · Accepted Answer

首先，你的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);">