Javascript 复制jQuery日期选择器

datepicker

函数仅对创建的第一个输入框起作用

我试图通过克隆包含日期选择器的

div

来复制它

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

最奇怪的是，在

文档上。ready

我有：

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

---

如果我点击

#txt

，它会一直工作。

我使用CSS类：

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

---

用这种方式处理多个日历字段对我来说很有用。

我建议只使用一个通用的类名。但是，如果出于某种原因反对此操作，还可以编写一个函数，为模板

div

（每次复制后调用）中的所有文本框创建日期选择器。比如：

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

---

我有一个非常类似的问题，经过几个小时的测试，我找到了一个解决方案。我复制了一段HTML代码，并将其插入到已经包含jQuery日期选择器日历的部分之后。起初我没有意识到的是，jQuery UI calendar在执行

.datepicker（）

函数时修改了元素的类。结果是，当您尝试复制代码并为该新部分启动日历的新实例时，它失败了，因为根据CSS，已经有了一个实例。如果尝试使用

.datepicker（'destroy'）

则无法销毁此重影实例，因为它实际上不存在。我通过重置HTML中日期选择器元素的类，然后将日期选择器添加到该元素中，解决了这个问题

下面是我使用的代码。希望这能为其他人节省一些时间

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.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();
});

$（'#addaddress'）。单击（函数（）{
变量计数=$（'.address_template'）.size（）；
var html=$（'.address_template'）.eq（0.html（）；
$（'#addaddress'）。在（''+html+''）之前；
$（'.address_template H1'）.eq（count.html（“上一个地址”+count）；
$（'.address\u date'）.eq（count）.attr（“class”，“address\u date”）；
$（'.address_date'）.eq（count）.attr（“id”，“movein”+count）；
$（“#movein”+count）.datepicker（）；
});

我正在克隆的html有多个日期选择器输入

根据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');

---

谢谢yall。

我不太理解示例代码，但您有一个很好的观点-在重新初始化日期选择器之前，您需要删除

.hasDatepicker

类。然后在克隆的元素上重新初始化datepicker，它就可以正常工作了。

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.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();
});

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');