jquery - 日期选择器选定的值始终出现在第一个文本框中

Question

我正在尝试创建一个表单，通过克隆表单中的现有元素来动态添加元素。现在我面临的问题是当我克隆具有“datepicker”类的文本框时。当我从克隆元素中选择日期时，所选值显示在我克隆它的第一个元素中。

这是代码:

$(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker();

在 document.ready 中我尝试了这个:

$(function () {
    $(".datepicker").datepicker();
});

还有这个:

$(function () {
    $(".datepicker").each(function(){$(this).datepicker()});
});

但两者给出相同的结果。请指导我。 。谢谢

Answer 1

当您通过克隆原始 div 动态创建输入元素时，这里 .clone() 将进行浅克隆而不是深度克隆，因此输入框实例将始终相同，因此 datepicker 将引用原始输入框。

您可以删除复制的输入框的id和class，然后在其上应用datepicker。

请参阅下面的 jquery 代码:

$(function(){
    $('input[type=button]').click(function(){
      var copiedDiv = $('#container').clone();

      var input = $(copiedDiv).find('input[type="text"]');

      $(copiedDiv).removeAttr('id');

      $(input).removeAttr('id').removeClass('datepicker hasDatepicker').val('');

      $(input).datepicker();             

      $('#container').after(copiedDiv);
    });

  // bind datepicker to existing input with class="datepicker"
  $(".datepicker").datepicker();
});

<强> Demo