Question

我有一个输入字段，我通过css类定义为datepicker。我现在想要克隆这个输入字段并使其克隆输入也是datepickers。

从各种来源阅读后，我开始相信以下代码应该可以工作，但事实并非如此。我希望也许有人可以帮我弄清楚我做错了什么：）

<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>

到目前为止输入字段是重复的，并在最后一个实例之后插入，但是datepicker不起作用。我尝试将'true'传递给克隆函数，但它给了我一个错误，说明 inst未定义。

任何帮助将不胜感激：）

Answer 1

将其更改为：

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

Answer 2

糟糕我不能再对上面给出的答案发表评论，但代码仍然存在！ datepicker显示在克隆的input元素中，但在原始输入字段中使用选定的日期值，并将克隆的输入字段留空。有任何建议吗？

编辑：

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

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

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

按照上面的建议删除类之后，我还删除了克隆输入元素的id。它与原始版本相同，因此我使用datepicker框中的所选日期更新原始输入字段。

Answer 3

我做了以下更改，但它确实有效。

在：

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

后：

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

Answer 4

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

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

解决方案：

1）销毁datepicker 2）为所有输入字段分配新的唯一ID 3）为每个输入分配datepicker

确保您的输入是这样的

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

在克隆之前，销毁datepicker

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

克隆后，也可以添加这些行

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

并且魔术发生了

克隆datepicker对象[JQuery]

4 个答案: