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

要初始化日期选择器，根据jQuery UI文档，我只需要执行$('＃example')。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"，它将始终有效。

解决方案

回答

我改用CSS类：

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

然后，在document.ready函数中：

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

以这种方式将其用于多个日历字段对我来说很有效。

回答

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

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

回答

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