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

Question

Jsfiddle here.

这是一个重现我的问题的简单示例。基本上，我有一个表单(用于读取有关多个候选人的数据)，其中有一个fieldset(它接受一个一个 候选人)，然后我有一个标记为添加候选人的按钮。单击时，应克隆上述fieldset并将其复制到上述fieldset下方，以便可以输入有关其他候选人的数据。

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

但主要思想是克隆先前的 fieldset 并将克隆的 fieldset 附加到先前的 fieldset 下方。 问题是附加的新内容不是字段集。它只有三个 input 元素。没有标签，什么都没有!克隆的是一个包含输入和标签的fieldset。

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

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