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

Question

Jsfiddle here.

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

对于第一个候选人，form中的每个数据字段的格式为allCandidatesArray[candidateNumber][fieldName]，例如allCandidatesArray[0][nameInput]以便于阅读和进一步分析提交表单时提交的数据。因此，在ADD CANDIDATE按钮的Click处理程序/侦听器中，我还进行了一些编程，以便在添加新候选项时增加candidateNumber中的allCandidatesArray[candidateNumber][fieldName]。

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

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

$(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>