Question

我想知道在ajax函数调用之后我的jquery-ui datepicker在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");
        }
    });
}

Answer 1

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

您可以通过在成功或完整功能中调用$.datepicker来完成此操作，或者将$.document.ajaxEnd()添加到您的javascript文件中，在每次ajax事件结束后初始化的内容（也有错误）。

请注意不要双重启动datepicker，尤其是在使用ajaxEnd时。这可能会导致意外行为。

Answer 2

$（document）.ready（）中的代码只能在页面加载后运行。如果我没有错，你会动态添加datepicker。一个人也这样做。选择如下变量中的选项：

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，请告诉我。

jjery日期选择器在ajax调用后将datepicker准备就绪时不起作用

2 个答案: