如果ajax调用已经在页面上,则jquery datepicker不起作用

Question

我已经在我的页面上有一个datepicker输入(称之为X).有一个按钮,当你点击它时,它会进行ajax调用并在页面上打印一些html内容.在ajax响应中,还有另一个datepicker输入(称之为Y),当你在独立页面上打开它时可以正常工作,但是在ajax调用中,Y没有显示datepicker框(但它在X上工作).

Y已经有了"hasDatepicker"类,我试图删除它然后回想起datePicker方法,但没有运气.我设法修复它的唯一方法是从页面源删除"ui-datepicker-div"并在Y上调用datepicker.但这次,X停止工作!

这种使用datepicker的方法有什么问题？我能以任何方式使它们都正常工作吗？

更新:我已经设法通过在ajax调用之前运行这两个命令然后在ajax调用之后调用datepicker来解决这个问题:

jQuery('.datepicker').datepicker("destroy");
jQuery('#ui-datepicker-div').remove();

我不知道为什么,但destroy命令不会删除ui-datepicker-div,我必须手动删除它!关于这个的任何线索？

Answer 1

对于动态添加的数据选择器

$('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});?

演示

Answer 2

我在这个问题上突破了几天,最后我设法解决了这个问题.

你只需要从DOM重新初始化之前删除一些由jQuery创建的div.

它是:

jQuery('#ui-datepicker-div').remove();

如果DOM中存在此div,则jQuery不会重新初始化DatePicker.

我的工作代码在这里:

jQuery(document).ready(function () {
    InitDatePickers();
});
function RemoveDatePickers() {
    jQuery('#ui-datepicker-div').remove();
}
function InitDatePickers() {
    $('#main .date_inp').datepicker($.datepicker.regional["ru"]);
}
function RefreshData() {
    RemoveDatePickers();
    $.ajax({
        type: 'GET',
        url: "/",
        data: GetFiltersData(),
        success: function (data, textStatus) {
            $("#main").html(data);
            InitDatePickers();
        }

    });
}

大家好!