jquery 克隆日期选择器不起作用 [英] jquery clone date picker not working

问题描述

使用日期选择器进行克隆.我在 stackoverflow 中搜索了我的问题，但没有得到正确的东西.当用户单击原始日期的日期时，它按预期工作但是一旦用户单击克隆的 div 中的 addmore 按钮，日期选择器就无法工作.我试着给 .destroy 结果没有按预期出现.这可能是重复的问题，但正如我所说的解决方案在我的情况下不起作用.

Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.

这是jquery代码.

Here is the jquery code.

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

这是小提琴链接

提前致谢

推荐答案

Jquery datepicker 为它在初始化时绑定的输入字段创建基于 UUID 的 ID 属性.如果您的克隆例程管理这些元素，则克隆这些元素会产生更多具有相同 ID(jQuery 不喜欢)或不同 ID 的元素(这意味着 datepicker 不知道克隆).

Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).

尝试像这样更新你的 js 代码

try updating your js code like this

$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.希望这会有所帮助.

here's the updated JSFIDDLE. hope this helps.

这篇关于jquery 克隆日期选择器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！