Javascript 页面中存在多个日期选择器的问题

我正在我的页面中使用引导日期选择器

我使用它的表单动态生成了多个日期选择器

现在的情况是，当您单击第一个输入元素并选择date时，它将对该输入字段起作用

现在添加另一个元素并单击该输入字段。日期选择器未正确初始化

如果首先添加元素并单击输入，则效果良好

这是我到目前为止试过的

$(function() {
  var addMilIterator = 0;
  $(document).on('click', '[data-ele="addMil"]', function(e) {
    var clone = $('.milestones-form').first().clone(true);

    $(clone).find('[name]').each(function() {
      var name = $(this).attr('name');
      $(this).val("");
      $(this).attr('name', name + '_' + addMilIterator);
    });
    addMilIterator++;
    $('.milestones-form').last().after(clone);
  });
  $(document).on('focus', '[name^="date"]', function() {
    $(this).datepicker({

    })
  });
});

如果有帮助的话，我已经为它制作了一把小提琴。任何暗示都行。

---

请不要因为我的编辑能力差就发表负面评论。谢谢大家…

您必须确保正确克隆输入<代码>克隆（错误）

---

请检查

这是因为您在单击时创建的每个克隆都具有相同的

id

值，即

沙箱容器

属性

id

应该是唯一的，以便功能正常工作

解决方案

在创建克隆时的单击事件中，还可以生成并附加一个唯一的

id

值，如下所示

var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++ );

在此之前，您需要在单击事件外部初始化

num

。所以整个JQuery代码看起来像

$(function() {
  var addMilIterator = 0;
  var num = 1;

  $(document).on('click', '[data-ele="addMil"]', function(e) {

    var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++ );

    $(clone).find('[name]').each(function() {
      ...
      ...

---

我认为这可能会对您有所帮助，您可能需要稍微更改代码，但这应该正是您所需要的-确实如此。

$(function() {
  var addMilIterator = 0;
  var num = 1;

  $(document).on('click', '[data-ele="addMil"]', function(e) {

    var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++ );

    $(clone).find('[name]').each(function() {
      ...
      ...