jQuery的克隆日期选择器不工作 [英] jquery clone date picker not working

问题描述

使用datepicker进行克隆.我在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屋！