如何克隆克隆字段集內的字段集jQuery

Question

我需要克隆克隆字段集內的字段集。

所以我的規則的結構就像是

當我點擊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); 
} 

所以，我怎麼可以克隆一個克隆的字段集裏面一個字段？

Answer 1

第一，你的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);">