Datepicker 在克隆容器中不起作用

Question

使用 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++;
});

这是我的工作link

提前致谢

Answer 1

在您的代码中，您有 2 个错误：

1. 你使用clone函数的次数太多了，这会让jQuery感到困惑，datetimepicker可能无法很好地处理这个问题：

   var clone = $('#accordion1 .panel:last-child').clone(true, true); ... $(clone).clone(true, true).addClass('cloned_element')...

2. 使用datetimepicker('destroy') 而不是自己尝试删除它的事件/类

您可以查看我在第 35 行 here 的自定义脚本以了解更多详细信息。希望这会有所帮助 如果我错了，请纠正我。

Answer 2

您必须为克隆初始化 datePicker。

$(clone).datepicker({...})

为了避免重复，您可以创建一个获取元素并初始化日期选择器的函数，
然后将它用于第一个和克隆。

function setDatepicker(element){ element.datepicker({...}); }