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

這是我的工作鏈接

提前致謝

Answer 1

您必須為克隆初始化 datePicker。

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

為了避免重復，您可以制作一個獲取元素並初始化日期選擇器的 function，
然后將它用於第一個和克隆。

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

Answer 2

在您的代碼中，您有 2 個錯誤：

1. 您使用clone function 太多次，這會使 jQuery 混淆，datetimepicker 可能無法正常工作：

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

2. 使用datetimepicker('destroy')而不是自己嘗試刪除它的事件/類

您可以在此處查看我在第 35 行的自定義腳本以獲取更多詳細信息。 希望這會有所幫助，如果我錯了，請糾正我。