Datepicker 选择的值总是出现在第一个文本框上答案

【问题标题】：Datepicker selected value always goes on the first textboxDatepicker 选择的值总是出现在第一个文本框上
【发布时间】：2014-08-12 15:39:57
【问题描述】：

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

代码如下：

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

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

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

还有这个：

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

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

【问题讨论】：

您是如何尝试访问/设置所选值的？
你应该在新克隆的 DOM 元素上初始化 .datepikcet();，因为所有 jQuery 在加载时初始化，不会在新的 DOM 元素上工作，你应该初始化新的。
第一行代码不会初始化新的克隆元素吗？ $(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker();

标签： jquery jquery-ui-datepicker

【解决方案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

【讨论】：

我给他们分配了不同的id和名字。 .
你可以看到我的 jsfiddle 链接按预期工作，你能分享你的代码和 jsfiddle 链接吗？
是的，你的 jsfiddle 工作得很好。 .但在我的情况下，我无法删除 id 。 .相反，我正在更改元素的 id，以便每个元素都有唯一的 id。 .在这种情况下，id 真的很重要吗？
不需要删除id，但在分配新的时它应该是唯一的。但是您需要在分配 datepicker 之前删除class="hasDatepicker"。
是的 id 是唯一的，我认为这一行将删除类： $(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass ('hasDatepicker').datepicker();