0

我创建了一个可以动态添加和删除字段的表单。我非常接近让它工作，但由于某种原因，我可以填写第一个字段，添加一个新字段，第一个字段数据仍然存在。然后当我添加第二个字段时，填写并添加另一个，它将清除所有现有数据。

我可以说flatpickr日历总是在第一个字段上，但是当我添加后续字段时，flatpickr日历仅适用于最后一个字段，实际上不会显示两者之间的任何字段。我真的需要一些帮助，因为我花了这么长时间试图弄清楚:(

我相信这是我的 JS 以及它如何获取最后一个元素的问题，而不是它如何调用flatpickr库。

这是我在 JSFiddle 中的所有代码： https ://jsfiddle.net/danboy4/w9s9ayep/

谢谢！

4

1 回答 1

1

您的假设是正确的，即错误位于它如何获取最后一个元素。您有以下代码：

var html = $(".copy-fields").html();
$(".after-add-more").after(html);

var lastInput = $(".control-group").closest(".start").prevObject 
var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];

这将直接在第一个输入框之后添加新复制的字段，但是当从数组中获取要使用 flatpickr 的元素时，您将使用 lastInput.length-2. 该索引始终是最后一个可见框的索引。问题是您新添加的框不是最后一个可见框，而是第二个（因为它是在第一个输入框之后直接添加的）。因此它将覆盖以前的值。

因此，如果您只是更改var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];它var lastInput2 = lastInput[1].getElementsByClassName("start")[0];，它将按应有的方式工作。

或者，您可以保持var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];原样，而是更改新元素的放置位置。总是把它放在最后，你可以做这样的事情$("#button").before(html);

希望我能帮助你。

于 2018-05-18T06:14:24.140 回答