如何正确地克隆一个字段集元素并将其附加到表单中？

Question

这是一个重现我的问题的简单示例。基本上，我有一个 form （读取有关多个候选人的数据），其中我有一个 fieldset （它为一个候选人输入数据），然后我有一个标记为 ADD CANDIDATE 的按钮。单击时，上面的fieldset应该被克隆复制到上面的fieldset下面，这样就可以输入另一个候选人的数据了。

对于第一个候选人，form中的每个数据字段都是allCandidatesArray[candidateNumber][fieldName]的形式，例如allCandidatesArray[0][nameInput] 方便在提交表单时读取和进一步分析提交的数据。因此，在单击 ADD CANDIDATE 按钮的 handler/listener 中，我还进行了一些编程，以在添加新候选人时增加 allCandidatesArray[candidateNumber][fieldName] 中的 candidateNumber。

但主要思想是克隆之前的 fieldset 并将克隆的 fieldset 附加到之前的 fieldset 下方。 问题是附加的新事物不是 fieldset。它只是三个 input 元素。没有标签，什么都没有！克隆的是 fieldset，其中包含 input 和 label。

问题是为什么？我该如何解决这个问题？

$(document).on("click", ".addMobileButton", function() {

 //alert(".addMobileButton clicked.");//check  

 var parentRow = $(this).closest(".row");

 var idOfThis = $(this).attr('id');
 //alert(idOfThis);//check
 //alert(idOfThis.length);//check
 var candidateNumber = idOfThis.slice(idOfThis.length-2, idOfThis.length-1);
 //alert("candidateNumber: " + candidateNumber);//check

 var nthMobileNumberOfThisCandidate = idOfThis.slice(-1);
 //alert("nthMobileNumberOfThiscandidate: " + nthMobileNumberOfThiscandidate);//check
 var newNthMobileOfThiscandidate = ++nthMobileNumberOfThisCandidate;
 //alert("newNthMobileNumberOfThisCandidate: " + newNthMobileOfThisCandidate);//check

 parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput'+candidateNumber+'" class="validate" name="allCandidatesArray['+candidateNumber+'][mobileInput][]"/><label for="mobileInput'+candidateNumber+'">Mobile</label></div><div class="col l1 addMobileButtonWrapper"><a id="addMobileButton'+candidateNumber+''+newNthMobileOfThisCandidate+'" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a></div></div>');


});







$(document).ready(function() {



 /*
 *
 */
 $("a#addNewCandidateButton").on("click", function() {

  alert("#addNewCandidateButton clicked.");//check


  var previousFieldset = $(this).parent(".row").prevAll("fieldset.wrapper:first");
  //alert(previousFieldset[0].outerHTML);//check


  var fieldsetToClone = previousFieldset.clone();
  //alert(fieldsetToClone[0].outerHTML);//check


  var idOfAddMobileButton = fieldsetToClone.find(".addMobileButton").attr('id');
  //alert('idOfAddMobileButton: ' + idOfAddMobileButton);

  var candidateNumber = idOfAddMobileButton.slice(idOfAddMobileButton.length-2, idOfAddMobileButton.length-1);
  //alert("candidateNumber: " + candidateNumber);//check
  var candidateNumberIncremented = ++candidateNumber;
  //alert('candidateNumberIncremented: ' + candidateNumberIncremented);//check



  fieldsetToClone.find('input[type=text]').each(function(index) {
   var inputNameAttribute = $(this).attr('name');
   //alert('inputNameAttribute: ' + inputNameAttribute);//check

   var indexOfFirstOpeningBracket = inputNameAttribute.indexOf('[');
   //alert('indexOfFirstOpeningBracket: ' + indexOfFirstOpeningBracket);//check

   var indexOfFirstClosingBracket = inputNameAttribute.indexOf(']');
   //alert('indexOfFirstClosingBracket') + indexOfFirstClosingBracket;//check


   var inputNameAttributeArray = inputNameAttribute.split('');
   //alert('inputNameAttributeArray: ' + inputNameAttributeArray);//check

   //inputNameAttributeArray.splice(indexOfFirstOpeningBracket, indexOfFirstClosingBracket, candidateNumberIncremented);
   var lengthOfCandidate = (indexOfFirstClosingBracket - indexOfFirstOpeningBracket) -1;
   //alert('lengthOfCandidate: ' + lengthOfCandidate);//check
   inputNameAttributeArray.splice((indexOfFirstOpeningBracket+1), lengthOfCandidate, candidateNumberIncremented);
   //alert('inputNameAttributeArray after SPLICING:' + inputNameAttributeArray);//check

   inputNameAttributeModified = inputNameAttributeArray.join('');
   //alert('inputNameAttributeModified: ' + inputNameAttributeModified);//check

   $(this).attr('name', inputNameAttributeModified);

  });



  fieldsetToClone = fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');



  fieldsetToClone = fieldsetToClone.find("input[type=text]").val('');

  previousFieldset.after(fieldsetToClone);

 });
 


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>




<form id="credentialsForm" action="" method="get">

 <fieldset class="container wrapper">
  <div class="row valign-wrapper">

   <div class="input-field col l3 offset-l1">
    <input type="text" id="nameInput0" class="validate" name="allCandidatesArray[0][nameInput]"/>
    <label class="blue-text" for="nameInput0">Name</label>
   </div>

   <div class="input-field col l3 offset-l1">
    <input type="text" id="ssnValueInput0" class="validate" name="allCandidatesArray[0][ssnValueInput]"/>
    <label class="blue-text" for="ssnValueInput0">SSN</label>
   </div>

  </div><!--.row-->



  <div class="row valign-wrapper">

   <div class="input-field col l3">
    <input type="text" id="mobileInput0" class="validate" name="allCandidatesArray[0][mobileInput][]"/>
    <label class="blue-text" for="mobileInput0">Mobile</label>
   </div>

   <div class="col l1 offset-l1 addMobileButtonWrapper">
    <a id="addMobileButton00" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a>
   </div>

  </div><!--.row-->



  <!--<div class="container"><div class="divider"></div></div>-->

  </fieldset><!--#wrapper-->






  <div class="row valign-wrapper">
   <a id="addNewCandidateButton" class="btn-flat waves-effect waves-light blue white-text col l2">Add Candidate</a>
  </div><!--.row-->


  

  <div class="row" id="submitFormRow">
   <div class="col l4 offset-l4">
    <button type="submit" class="btn waves-light waves-effect">Add Candidates</button>
   </div>
  </div><!--.row #s -->

</form>

Answer 1

您正在覆盖以下语句中的克隆对象，因此仅附加了输入。

fieldsetToClone = fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone = fieldsetToClone.find("input[type=text]").val('');

使用

fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone.find("input[type=text]").val('');

$(document).on("click", ".addMobileButton", function() {
  var parentRow = $(this).closest(".row");
  var idOfThis = $(this).attr('id');
  var candidateNumber = idOfThis.slice(idOfThis.length - 2, idOfThis.length - 1);
  var nthMobileNumberOfThisCandidate = idOfThis.slice(-1);
  var newNthMobileOfThiscandidate = ++nthMobileNumberOfThisCandidate;
  parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput' + candidateNumber + '" class="validate" name="allCandidatesArray[' + candidateNumber + '][mobileInput][]"/><label for="mobileInput' + candidateNumber + '">Mobile</label></div><div class="col l1 addMobileButtonWrapper"><a id="addMobileButton' + candidateNumber + '' + newNthMobileOfThisCandidate + '" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a></div></div>');
});

$("a#addNewCandidateButton").on("click", function() {

  var previousFieldset = $(this).parent(".row").prevAll("fieldset.wrapper:first");
  var fieldsetToClone = previousFieldset.clone();
  var idOfAddMobileButton = fieldsetToClone.find(".addMobileButton").attr('id');
  var candidateNumber = idOfAddMobileButton.slice(idOfAddMobileButton.length - 2, idOfAddMobileButton.length - 1);

  var candidateNumberIncremented = ++candidateNumber;
  fieldsetToClone.find('input[type=text]').each(function(index) {
    var inputNameAttribute = $(this).attr('name');

    var indexOfFirstOpeningBracket = inputNameAttribute.indexOf('[');

    var indexOfFirstClosingBracket = inputNameAttribute.indexOf(']');

    var inputNameAttributeArray = inputNameAttribute.split('');
    var lengthOfCandidate = (indexOfFirstClosingBracket - indexOfFirstOpeningBracket) - 1;

    inputNameAttributeArray.splice((indexOfFirstOpeningBracket + 1), lengthOfCandidate, candidateNumberIncremented);

    inputNameAttributeModified = inputNameAttributeArray.join('');
    $(this).attr('name', inputNameAttributeModified);
  });

  fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');

  fieldsetToClone.find("input[type=text]").val('');
  previousFieldset.after(fieldsetToClone);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet" />




<form id="credentialsForm" action="" method="get">

  <fieldset class="container wrapper">
    <div class="row valign-wrapper">

      <div class="input-field col l3 offset-l1">
        <input type="text" id="nameInput0" class="validate" name="allCandidatesArray[0][nameInput]" />
        <label class="blue-text" for="nameInput0">Name</label>
      </div>

      <div class="input-field col l3 offset-l1">
        <input type="text" id="ssnValueInput0" class="validate" name="allCandidatesArray[0][ssnValueInput]" />
        <label class="blue-text" for="ssnValueInput0">SSN</label>
      </div>

    </div>
    <!--.row-->



    <div class="row valign-wrapper">

      <div class="input-field col l3">
        <input type="text" id="mobileInput0" class="validate" name="allCandidatesArray[0][mobileInput][]" />
        <label class="blue-text" for="mobileInput0">Mobile</label>
      </div>

      <div class="col l1 offset-l1 addMobileButtonWrapper">
        <a id="addMobileButton00" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a>
      </div>

    </div>
    <!--.row-->



    <!--<div class="container"><div class="divider"></div></div>-->

  </fieldset>
  <!--#wrapper-->






  <div class="row valign-wrapper">
    <a id="addNewCandidateButton" class="btn-flat waves-effect waves-light blue white-text col l2">Add Candidate</a>
  </div>
  <!--.row-->




  <div class="row" id="submitFormRow">
    <div class="col l4 offset-l4">
      <button type="submit" class="btn waves-light waves-effect">Add Candidates</button>
    </div>
  </div>
  <!--.row #s -->

</form>

如何正确地克隆一个字段集元素并将其附加到表单中？

How to CLONE a fieldset element and append it inside a form, correctly?

javascript

jquery

html

jquery-clone