javascript - 验证后的 jQuery 动态字段消失

Question

我的 jQuery 和验证有问题。

这是我的代码:

var fielddd = 1;
$(document).on('click', '.btn.add-field', function() {
  fielddd++;
  $('#newfield').append('<textarea class="from-control" name="somename[]" id="field_' + field + '"></textarea>' + '<button class="btn add-field">add</button>' + '<textarea class="from-control" name="somename2[]" id="field_' + field + '"></textarea>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <textarea class="from-control"  name="somename[]" id="field"></textarea>
  <button class="btn add-field">add</button>
  <textarea class="from-control" name="somename2[]" id="field"></textarea>
</div>
<div class="row" id="newfield">
  <!-- new textarea -->
</div>

问题是我有一个验证，并且有一个提交按钮，在检查一个字段是否为空后，代码生成并重定向，在此重定向到同一页面之后，以便用户可以在 中给出他的参数文本区域。但在此重定向之后，用户添加的字段将消失。

如何修复它？

Answer 1

您在每个文本区域中使用相同的 ID。 ID 必须是唯一的。您错误地使用了“field”，必须将其替换为正在递增的“fielddd”。

var fielddd = 1;
$(document).on('click', '.btn.add-field', function() {
  fielddd++;
  $('#newfield').append('<textarea class="from-control" id="field_' + fielddd + '"></textarea>' + '<button class="btn add-field">add</button>' + '<textarea class="from-control" id="field_' + fielddd + '"></textarea>');
});