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

【问题标题】：Cloning datepicker objects [JQuery]克隆日期选择器对象 [JQuery]
【发布时间】：2010-03-01 20:36:31
【问题描述】：

我有一个输入字段，我通过 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 没有定义。

任何帮助将不胜感激:)

【问题讨论】：

标签： jquery clone jquery-ui-datepicker

【解决方案1】：

改成这样：

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

【讨论】：

它会克隆输入，但不会创建 datepicker 对象（它也不会给出错误，这使得它更加混乱）
显然您必须在再次调用 datepicker() 之前删除“hasDatepicker”类。我已经更新了帖子。
我玩弄了代码以进一步理解它，似乎 jQuery 使用该类名作为标志来了解输入是否已经初始化。将其添加到第二个输入可防止对象成为日期选择器。有趣：）再次感谢，我今晚会更聪明地睡觉！
删除 'hasDatepicker' 类就足够了。
复制我这样做的选项：$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker($('.calendar:last').datepicker('option', 'all'));

【解决方案2】：

糟糕的是，我无法再对上面给出的答案发表评论，但代码仍然失败！日期选择器显示在克隆的输入元素处，但在原始输入字段中使用选定的日期值并将克隆的输入字段留空..有什么建议吗？

编辑：

使用以下代码为我修复了它..

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

（请注意，我已经克隆了一个包装器，并且只针对该包装器中的“基准”输入字段）

按照上面的建议删除类后，我还删除了克隆输入元素的 id。它和原来的一样，所以我在日期选择器框中用选定的日期更新原来的输入字段。

【讨论】：

id 是问题所在。 .datepicker() 插件为元素分配一个随机 id，然后将其与该数据选择器对象相关联。 Clone() 然后在克隆元素时保留 id。在我看来，clone() 可能应该丢弃任何设置的 id，看看id 应该如何在每个文档中都是唯一的。
这种方法对我有用，除了我使用 removeAttr('id');谢谢。

【解决方案3】：

我进行了以下更改并且它有效。

之前：

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

之后：

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

【讨论】：

【解决方案4】：

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

首先，是什么导致了问题： JQuery 将 datepicker 分配给元素 id。如果你正在克隆元素，那么同样的 id 也可能被克隆。哪个 jQuery 不喜欢。无论您单击哪个输入字段，您最终都可能会收到空引用错误或分配给第一个输入字段的日期。

解决方案：

1) 销毁日期选择器 2）为所有输入字段分配新的唯一ID 3) 为每个输入分配日期选择器

确保您的输入是这样的

<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++;
});

奇迹发生了

【讨论】：