AJAX 加载的 JQuery 日期选择器仅在警报后工作答案

【问题标题】：AJAX loaded JQuery datepicker only working after alertAJAX 加载的 JQuery 日期选择器仅在警报后工作
【发布时间】：2016-08-18 11:38:39
【问题描述】：

我有一个很奇怪的问题。我创建了一个分配了日期选择器的字段。

AJAX 调用正在将该字段加载到 div 中。

总而言之，这已经奏效了。但是有一个问题。仅当我在启动日期选择器之前设置警报代码时才有效。

当我删除警报时。它只是停止工作。

初始化代码在另一个函数中：

alert('kut');
$("#mini_calendar").datepicker({
    defaultDate: "now",
    constrainInput: false,
    changeMonth: true,
    numberOfMonths: 2,
    onClose: function (selectedDate) {
    }
});

我希望有人知道我做错了什么。

编辑

谢谢一百万。

解决办法是：

    interval = setInterval(function(){ 
        if($("#mini_calendar").length > 0) {
            $("#mini_calendar").datepicker({
                defaultDate: "now",
                constrainInput: false,
                changeMonth: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                }
            });
            clearInterval( interval );
        }
    }, 300);

编辑：

我在 Ajax 成功时称它们为：

    ///######## IN CASE OF SUCCESS
    success: function (response) {
        if (response != '') {
            $("[@targetDiv]").html(response);
            DateNav_CalendarInit(DisplayType);
        }
        else {
            alert('error! Something went wrong during the obtaining of data!');
        }
    }

“DateNav_CalendarInit()”调用初始化代码

【问题讨论】：

确保在字段加载后启动它。
mini_calendar id元素是动态生成的吗？

标签： javascript jquery ajax datepicker

【解决方案1】：

如果没有警报，您会尝试在 DOM 元素实际存在之前捕获它。

您应该等待 Document Ready 事件：

例子：

$(function(){
    // .. your code here ..
}

...或者只是将您的 javascript 代码放在标签的底部（或至少在 *#mini_calendar" 元素之后）。

【讨论】：

我真的不明白你的意思，我应该等待 Document Ready 事件，因为它是由 AJAX 调用生成的。
对不起。我忽略了这一点。但情况是一样的：您试图在元素实际存在之前捕获它。当然。如果要更改在 Ajax 调用完成后创建的元素，则依赖 Document Ready 事件也将不起作用。那是因为您需要监听的事件是实际的对象创建。总而言之：您可以在创建该元素后（在 Ajax 成功回调中）附加您显示的代码，调用包含它的函数，或者触发一些用户定义的事件来监听。
这是一个带有间隔的解决方案！这是个好主意！
没有。你做错了！！！当网络足够慢时，依赖间隔将再次失败。阅读我之前的评论：我写了这个答案，认为 #mini_calendar 元素已经在文档的 html 上。使用超时有时会失败，使用超时检测何时工作（现在我看到了你的编辑）只是一个拙劣的工作。阅读我之前的评论：您需要在 Ajax() 请求的 after 创建日历元素的 success 回调中执行此操作，或者至少在刚刚触发某些元素之后执行此操作.
我已经成功调用它了。查看我的编辑（阿姆斯特丹时间 11:29）

【解决方案2】：

几天前我也遇到了同样的问题，我是通过 jquery load() 函数完成的。

$('body').on('load change','#mini_calendar 将加载的容器元素',function(){ $("#mini_calendar").datepicker({ 默认日期：“现在”，约束输入：假，更改月份：真， numberOfMonths：2， onClose: 函数 (selectedDate) { } }); });

不要忘记替换容器元素选择器。否则代码将无法工作

如果不是这样，您可以设置间隔来检查 $('mini_calendar') 是否存在于元素中。

【讨论】：