我使用下面的 jQuery 代码生成动态输入字段(多个),它包括时间选择器和日期选择器,但它们不起作用。
$('#add_another_event').click(function()
{
var $address = $('#sub_events');
var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
var newNum = new Number(num + 1);
var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');
//set all div id's and the input id's
newElem.children('div').each (function (i) {
this.id = 'input' + (newNum*5 + i);
});
newElem.find('input').each (function () {
this.id = this.id + newNum;
this.name = this.name + newNum;
});
if (num > 0) {
$('.clonedAddress:last').after(newElem);
} else {
$address.after(newElem);
}
$('#btnDel').removeAttr('disabled');
});
这些是我克隆的字段
<p><label>Art Space </label>
<input id="as_name" name="as_name" class="txt-input small" type="text">
<input id="as_id" name="as_id" class="txt-input small" type="hidden"></p>
<p><label>Start Date </label>
<input id="start_date" name="start_date" class="datepicker txt-input small" type="text"></p>
<p><label>End Date </label>
<input id="end_date" name="end_date" class="datepicker txt-input small" type="text"></p>
<p><label>Opening Hours </label>
From : <input style="width: 100px" id="time_from" name="time_from" class="timepicker txt-input small" type="text">
To : <input style="width: 100px" id="time_to" name="time_to" class="timepicker txt-input small" type="text">
</p>
时间选择器和日期选择器
$('.timepicker').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
$('.datepicker').datepicker();
我的问题是当字段克隆时,上面的选择器不会显示。
我尝试使用 jQuery .live()
但它不起作用。我不是 jQuery 专家。
最佳答案
您需要重新初始化新元素上的日期/时间选择器并清除 UI 小部件添加的类:
$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()
在这种情况下,提供您的新集合作为上下文,这样您就不必搜索整个文档。
<小时/>这显示了克隆与模板的陷阱之一。如果您使用模板来生成新表单,则不会冒险复制可能影响新表单中构建小部件的方式的数据和类。在您的情况下,您需要删除 UI 应用的 hasDatepicker
类,并防止在输入上初始化新的日期选择器。但是,您也无法使用清理方法datepicker('destroy')
,因为新节点上实际上没有日期选择器。所以你最终不得不手动进行清理。
关于javascript - 动态创建字段时,jQuery 日期选择器和时间选择器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15052059/