复制jQuery datepicker

datepicker函数仅适用于创建的第一个输入框。

我试图通过克隆包含它的div来复制一个datepicker。

 click 
 input-text  date time picker   

要初始化datepicker，根据jQuery UI文档我只需要做$('#example').datepicker(); 它确实有效，但仅限于创建的第一个datepicker。

复制div的代码如下：

 $("a#dupMe").click(function(event){ event.preventDefault(); i++; var a = $("#template") .clone(true) .insertBefore("#template") .hide() .fadeIn(1000); a.find("input#txt").attr('value', i); a.find("input#example").datepicker(); }); 

最奇怪的是在document.ready我已经：

 $('#template #example').datepicker(); $("#template #txt").click(function() { alert($(this).val()); }); 

如果我点击#txt它总是有效。

Answer 1

我建议你也只使用一个通用的类名。 但是，如果您出于某种原因反对这种情况，您还可以编写一个函数来为模板div所有文本框创建日期选择器（在每次复制后调用）。 就像是：

 function makeDatePickers() { $("#template input[type=text]").datepicker(); } 

Answer 2

我使用CSS类代替：

然后，在你的document.ready函数中：

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

以这种方式为多个日历字段使用它对我有用。

Answer 3

我有一个非常类似的问题，经过几个小时的测试，我找到了解决方案。 我正在复制一段HTML代码并将其插入已包含jQuery日期选择器日历的部分之后。 我最初没有意识到的是jQuery UI日历在执行.datepicker()函数时修改了元素的类。 结果是当您尝试复制代码并为该新部分启动日历的新实例时，它失败了，因为根据CSS已经存在。 如果您尝试使用.datepicker('destroy')则无法销毁此ghost实例，因为它实际上并不存在。 我通过在HTML中重置日期选择器元素的类然后将datepicker添加到该元素来解决了这个问题…

以下是我使用的代码。 希望这能节省别人的时间……

 $('#addaddress').click(function() { var count = $('.address_template').size(); var html = $('.address_template').eq(0).html(); $('#addaddress').before('
' + html + '
'); $('.address_template H1').eq(count).html("Previous Address " + count); $('.address_date').eq(count).attr("class","address_date"); $('.address_date').eq(count).attr("id","movein" + count); $("#movein" + count).datepicker(); }); 

Answer 4

我克隆的html有多个datepicker输入。

使用Ryan Stemkoski的答案和Alex King的评论，我提出了这个解决方案：

 var clonedObject = this.el.find('.jLo:last-child') clonedObject.find('input.ui-datepicker').each(function(index, element) { $(element).removeClass('hasDatepicker'); $(element).datepicker(); }); clonedObject.appendTo('.jLo'); 

谢谢你。