添加具有动态字段名称的新字段会将字段名称设置为相同的名称答案

【问题标题】：Adding new fields with dynamic field name sets field names to the same name添加具有动态字段名称的新字段会将字段名称设置为相同的名称
【发布时间】：2016-03-16 15:39:03
【问题描述】：

我有一个 div，其中包含一个我想在单击添加按钮时添加到页面的字段。

// the div that contains the field
<div class="dependent-row" style="visibility: hidden;">
    <div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
        <label>First Name</label>
        <input type="text" value="" class="firstName dependentfield">
    </div>
</div>

每次单击添加按钮时都会显示一组新字段。

我遇到的问题是它将所有添加的字段设置为相同的名称。

var index = 0;

$("#add-dependent-btn").on('click', function(e) {
    e.preventDefault();
    index++;

    $(this).after($('.dependent-row').html());
    $('.firstName').attr('name', 'fields[dependents][new'+index+'][fields][firstName]');
});

我知道我只需要在单击添加按钮时将要添加的字段归零，但不知道该怎么做。

如果我点击添加按钮两次，这里是呈现的 html：

<input type="text" value="" class="firstName dependentfield" name="fields[dependents][new2][fields][firstName]">

<input type="text" value="" class="firstName dependentfield" name="fields[dependents][new2][fields][firstName]">

【问题讨论】：

那是因为你把所有的元素都设置为.firstName类是在你添加到DOM之后。
@choz 我知道，我需要一些动态分配 firstName 字段名称属性的方法。我还有其他字段，但我在发布问题时只使用了名字。
您只想复制input 还是整个.dependent-row？我
我想复制依赖行中的所有内容，并确保它为每个字段分配不同的 name=""。
检查我的答案并在input 上查看他们的姓名。这就是你想要达到的目标吗？

标签： javascript jquery html

【解决方案1】：

这基本上就是你的做法。

var rowObject = null;

function addRow(lineNumber) {
  if (rowObject != null) {
    var newRowObject = rowObject.clone();
    var label = "Label " + lineNumber;
    var inputName = 'fields[dependents][new' + lineNumber + '][fields][firstName]';

    var myLabel = newRowObject.find('label');
    myLabel.text(label);

    var myInput = newRowObject.find('input.firstName.dependentfield');
    myInput.val('');
    myInput.attr('name', inputName);

    $('div.dependent-row').append(newRowObject);
  }
}

$(function() {
  rowObject = $('div.dependent-row > div.row').clone();

  $('#add-dependent-btn').click(function() {
    var totalRow = $('div.dependent-row > div.row').length;
    addRow(totalRow + 1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-dependent-btn">
  Add row
</button>
<div class="dependent-row">
  <div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
    <label>First Name</label>
    <input type="text" value="" class="firstName dependentfield">
  </div>
</div>

【讨论】：