当我在ajax调用后准备好日期选择器时，jquery日期选择器不起作用答案

【问题标题】：jquery date picker is not work when i put datepicker on ready after ajax call当我在ajax调用后准备好日期选择器时，jquery日期选择器不起作用
【发布时间】：2015-06-01 11:12:00
【问题描述】：

我想知道我的 jquery-ui datepicker 在 ajax 函数调用后无法在 document.ready 中工作。当我穿上 ajax 成功完成它的工作时，请帮助我该怎么做。不工作的原因是什么

$("#ScheduledArrivalDate").datepicker({
    beforeShow: function () {
        setTimeout(function () {
            $('.ui-datepicker').css('z-index', 2000);
        }, 0);
    }
});

function getPage(page) {
    $.ajax({
        type: "POST",
        url: page,
        data: $("#frm").serialize(),
        xhrFields: {
            withCredentials: true
        },
        success: function (html) {
            $('#List').empty();
            $('#List').append($.parseHTML(html));
        },
        error: function () {
            alert("error");
        },
        complete: function () { 
           alert("complete");
        }
    });
}

【问题讨论】：

也发布你的html！！您是否在success 的ajax 中附加了任何html？
如果我只是把这个函数 ajax 完成或 ajax 成功它工作正常
我明白了兄弟！你也可以在这里发布你的ajax 吗？？
setTimeout(func, 0); ！？
查看link

标签： javascript jquery ajax datepicker

【解决方案1】：

$.document.ready() 仅在没有 ajax 的页面加载后启动。当您在 ajax 调用中替换/附加 html 并且在新插入的 html 中有一个日期字段时，您需要再次初始化它（至少对于新插入的 html 块）。

您可以通过在您的成功或完成函数中调用$.datepicker 来执行此操作，就像您已经做的那样，或者通过将$.document.ajaxEnd() 添加到您的javascript 文件中，在每次ajax 事件结束后初始化的内容（也有错误） .

请注意不要重复启动日期选择器，尤其是在使用 ajaxEnd 时。这可能会导致意外行为。

【讨论】：

【解决方案2】：

$(document).ready() 中的代码只会在页面加载后运行。如果我没有错，您正在动态添加日期选择器。所以做一件事。在如下变量中选择选项：

var options = {
    beforeShow: function () {
        setTimeout(function () {
            $('.ui-datepicker').css('z-index', 2000);
        }, 0);
    }
}

然后：

$(document).ready(function(){
    $("#ScheduledArrivalDate").datepicker(options);
});

在 ajax 调用中：

function getPage(page) {
        $.ajax({
            type: "POST",
            url: page,
            data: $("#frm").serialize(),
            xhrFields: {
                withCredentials: true
            },
            success: function (html) {
                $('#List').empty();
                $('#List').append($.parseHTML(html));
                $('#IdOfnewlyAddedDatePicker').datepicker(options);
            },
            error: function () {
        alert("error");
            },
            complete: function () { 
               alert("complete");
            }
        });
    }

如果这不起作用或者您正在注入除此之外的 html，请告诉我。

【讨论】：