题
这 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
它总是有效的。
解决方案
我建议也只使用通用的类名。但是,如果您出于某种原因反对这样做,您还可以编写一个函数来为模板中的所有文本框创建日期选择器 div
(每次重复后调用)。就像是:
function makeDatePickers() {
$("#template input[type=text]").datepicker();
}
其他提示
我使用 CSS 类来代替:
<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />
然后,在你的 document.ready
功能:
$('.calendar').datepicker();
以这种方式用于多个日历字段对我来说很有效。
我遇到了一个非常相似的问题,经过几个小时的测试后我找到了解决方案。我正在复制一段 HTML 代码并将其插入到已经包含 jQuery 日期选择器日历的部分之后。我一开始没有意识到的是 jQuery UI 日历在执行时修改了元素的类 .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();
});
我正在克隆的 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');
谢谢你们。