jquery 克隆日期選擇器不起作用

Question

使用 datepicker 進行克隆。 我在 stackoverflow 中搜索了我的問題，但沒有得到正確的東西。 當用戶單擊原始日期的日期時，它按預期工作但是一旦用戶單擊克隆的 div 中的 addmore 按鈕，日期選擇器就無法工作。 我嘗試給.destroy結果沒有按預期出現。這可能是重復的問題，但正如我所說，該解決方案在我的情況下不起作用。

這是jquery代碼。

var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
    dateFormat: "mm-dd-yy",
    changeMonth: true,
    yearRange: "-100:+0",
    changeYear: true,
    maxDate: new Date(),
    showButtonPanel: false,
    beforeShow: function () {
        setTimeout(function (){
        $('.ui-datepicker').css('z-index', 99999999999999);

        }, 0);
    }
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
    $(document).on("click", ".edu_add_button", function () { 
        alert("checj");
        var $clone = $('.cloned-row1:eq(0)').clone(true,true);
        //alert("Clone number" + clone);
        $clone.find('[id]').each(function(){this.id+='someotherpart'});
        $clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
        $clone.attr('id', "added"+(++count));
        $clone.find(".school_Name").attr('disabled', true).val('');
        $clone.find(".degree_Description").attr('disabled', true).val('');
        $clone.find("input.deg_date").datepicker();
        $(this).parents('.educat_info').after($clone);
    });
    $(document).on('click', ".btn_less1", function (){
        var len = $('.cloned-row1').length;
        if(len>1){
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }
    });

這是小提琴鏈接

提前致謝

Answer 1

Jquery datepicker在初始化時為它綁定的輸入字段創建基於 UUID 的 ID 屬性。 如果您的克隆例程管理這些元素（這意味着 datepicker 不知道克隆），則克隆這些元素會產生更多具有相同 ID（jQuery 不喜歡）或不同 ID 的元素。

嘗試像這樣更新你的 js 代碼

$clone.find("input.deg_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
        dateFormat: "mm-dd-yy",
        changeMonth: true,
        yearRange: "-100:+0",
        changeYear: true,
        maxDate: new Date(),
        showButtonPanel: false,
        beforeShow: function() {
            setTimeout(function() {
                $('.ui-datepicker').css('z-index', 99999999999999);

            }, 0);
        }
    });

這是更新的JSFIDDLE 。 希望這可以幫助。

Answer 2

您可以重新啟動日期選擇器，

最后將日期選擇器行放在點擊事件上

$(document).on("click", ".edu_add_button", function () { 
  ...
  ...
  ...
  ...
  $(".deg_date").datepicker("setDate", currentDate);
});

它會起作用！！！