[英]Datepicker not working in cloned container
使用 datepicker 进行手风琴克隆。 我用谷歌搜索但克隆的 datepicker 没有得到工作。 当用户单击原始日期的日期时,它按预期工作但是一旦用户单击克隆手风琴中的 addmore 按钮,日期选择器就无法工作。 我尝试删除id,hasDatepicker结果没有按预期出现。 这可能是重复的问题,但正如我所说,该解决方案不适用于我的情况。
这是 jquery 代码。
$(document).on('click', '.add_more_pets', function(event) {
var increment = $('.accordion .panel').length;
var panelCount = increment+1;
var clone = $('#accordion1 .panel:last-child').clone(true, true);
$('#accordion1 .panel').find('.panel-heading').addClass("collapsed");
$('#accordion1 .panel').find('.panel-collapse').removeClass("in");
if($('.accordion .panel').length == 4){
$(".add_more_pets").hide();
}
$(clone).find('.delete_expiration').text('Delete');
$(clone).find('.panel-heading').attr({id: 'heading'+panelCount, href: '#collapse'+panelCount, 'aria-expanded': 'false', 'aria-controls': 'collapse'+panelCount});
$(clone).find('.panel-title').text("Pet "+panelCount);
$(clone).find('input').val("");
$(clone).find('.panel-collapse').attr({id: 'collapse'+panelCount, 'aria-labelledby': "heading"+panelCount});
/* *************cloned datepicker************ */
$(clone).find("input.pet_dob")
.removeAttr('id')
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-60:+0",
maxDate : new Date(),
inline: true,
onSelect: function(selectedDate) {
var birthDay = selectedDate;
var DOB = new Date(birthDay);
var today = new Date();
var age = today.getTime() - DOB.getTime();
age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
$(this).parents('.date_container').next().find('input.pet_age').val(age);
}
});
$("#count_individual").val(increment);
$(clone).clone(true, true).addClass('cloned_element').appendTo(".accordion").find("input,select,textarea").attr("name","field_"+increment+"[]");
increment++;
});
这是我的工作链接
提前致谢
您必须为克隆初始化 datePicker。
$(clone).datepicker({...})
为了避免重复,您可以制作一个获取元素并初始化日期选择器的 function,
然后将它用于第一个和克隆。
function setDatepicker(element){ element.datepicker({...}); }
在您的代码中,您有 2 个错误:
您使用clone
function 太多次,这会使 jQuery 混淆,datetimepicker 可能无法正常工作:
var clone = $('#accordion1.panel:last-child').clone(true, true); ... $(clone).clone(true, true).addClass('cloned_element')...
使用datetimepicker('destroy')
而不是自己尝试删除它的事件/类
您可以在此处查看我在第 35 行的自定义脚本以获取更多详细信息。 希望这会有所帮助,如果我错了,请纠正我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.