克隆日期选择器对象 [JQuery]

Question

我有一个输入框，我通过CSS类定义为日期选择器。现在我想克隆这个输入框，并使克隆的输入框也成为日期选择器。

在阅读了各种资料后，我认为以下代码应该可以工作，但实际上并没有。希望有人能帮助我找出问题所在 :)

<input type="text" id="date" name="date" class="calendar" />
<input type="button" id="clone" name="clone" value="Clone dates" />

以下是JavaScript代码：

<script type="text/javascript">
$(document).ready(function(){

 $('.calendar').datepicker();

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last');
 });

});

</script>

到目前为止，输入字段已经复制并插入到最后一个实例之后，但是日期选择器不起作用。我尝试将“true”传递给克隆函数，但它给出了一个错误，说inst未定义。

任何帮助都将不胜感激 :)

- Gazillion

Answer 1

将其更改为以下内容：

$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker();

- David Morton

---

它会克隆输入，但不会创建日期选择器对象（也不会报错，这使得它更加令人困惑）。 - Gazillion

显然在再次调用datepicker（）之前，必须先删除“hasDatepicker”类。我已经更新了帖子。 - David Morton

我对代码进行了一些尝试以更好地理解它，似乎jQuery使用该类名作为标志来知道输入是否已经初始化。将其添加到第二个输入中可以防止对象成为日期选择器。有趣 :) 再次感谢，今晚我会更聪明！ - Gazillion

移除“hasDatepicker”类就足够了。 - mnowotka

复制选项的代码如下：$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker($('.calendar:last').datepicker('option', 'all')); - DigitalDan

Answer 2

很遗憾，我不能再评论上面给出的答案了，但代码仍然有问题！日期选择器显示在克隆的输入元素上，但使用原始输入字段中选择的日期值，并使克隆的输入字段为空。有什么建议吗？

编辑：

对我来说，使用以下代码解决了这个问题。

$('.datum',clone).removeClass("hasDatepicker").attr('id',"").datepicker();

（请注意，我已经克隆了一个包装器，并且只针对该包装器中的“数据”输入字段进行定位）

如上所建议，删除类之后，我还删除了克隆输入元素的id。它与原始输入框相同，这就是为什么我在日期选择框中更新原始输入字段以显示所选日期的原因。

- Sam Vloeberghs

---

“id”是问题所在。.datepicker()插件会为元素分配一个随机的id，然后将其与该datapicker对象关联起来。当元素被克隆时，clone()会保留该id。在我看来，clone()应该丢弃任何已设置的id，因为id本来就应该在整个文档中是唯一的。 - crush

这种方法对我很有效，除了我使用了removeAttr('id')。谢谢。 - ekerner

Answer 3

这可能有点晚了，但是上面所有的建议都对我没用，我想出了一个简单的解决方案。

首先，问题的原因是什么： JQuery将datepicker分配给元素ID。如果您克隆元素，则可能会克隆相同的ID，这是jQuery不喜欢的。您可能最终会收到空引用错误或无论单击哪个输入字段，日期都被分配给第一个输入字段。

解决方案：

1）销毁datepicker 2）为所有输入字段分配新的唯一ID 3）为每个输入字段分配datepicker 确保您的输入如下所示：

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

在克隆之前，销毁日期选择器。

$('.n1datepicker').datepicker('destroy');

在克隆之后，也要添加这些行。

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

并且魔法发生了

- EGN

Answer 4

我做了以下更改，现在它可以工作了。

之前：

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last');
 });

之后：

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last').attr('id',"");
 });

- SamNg