JQuery datepicker 仅在我在脚本中放置 alert() 时才有效答案

【问题标题】：JQuery datepicker only works if I put an alert() in the scriptJQuery datepicker 仅在我在脚本中放置 alert() 时才有效
【发布时间】：2016-01-03 23:43:36
【问题描述】：

我正在编写一个带有一些输入字段（在每一行上）的 jQuery 数据表。其中一个字段需要是日期，因此我尝试使用 jQuery datepicker 来完成该字段的输入。

使用模板为每一行呈现有问题的字段：

var invoiceDateInputTemplate = '<input class="datepicker" id="InvoiceDate_{0}" name="InvoiceDate_{0}" type="text" />';

在数据表构建期间，我呈现模板并将 {0} 替换为适当的 Id，以便每行的 id 和名称参数都是唯一的。

在我的 $(document).ready() 函数结束时，在构建表之后，我运行以下代码，使用类选择选项将我的每个“日期”字段变成启用日期选择器的字段。出于某种原因，这似乎不想导致字段启用日期选择器：

$(function() {
    $(".datepicker").datepicker();
});

如果我在 $(".datepicker").datepicker() 之前添加一个 alert() 调用，它就像一个冠军......在 datepicker 初始化之后调用 alert() 不起作用。

这会导致 DatePicker 呈现：

$(function() {
    alert();
    $(".datepicker").datepicker();
});

这会导致 DatePicker 无法呈现（包括在内以提供示例）：

$(function() {
    $(".datepicker").datepicker();
    alert();
});

为什么会这样？我是否遗漏了导致 DatePicker 无法按预期初始化字段的内容？我很确定必须触发警报以使 DatePicker 正常工作不是标准操作程序。另外，澄清一下，我不相信在数据表构建后我有任何领域被关注。

【问题讨论】：

.datepicker 一定会在 js 运行之前渲染吗？尝试将其包装在 setTimeout(function () {$(".datepicker").datepicker();}, 500)
你应该添加一个准备好的文档
您应该只在edit 中添加minimal reproducible example，这样它就可以成为主题。

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

我感觉你遇到了异步问题！

最简单的解决方案是将调用绑定到自定义事件上的datepicker()，然后在构建数据表后触发该事件。像这样：

$(function() {
    // Create data table here
    $(window).trigger('datatable.built');
});

$(window).on('datatable.built', function() {
    $(".datepicker").datepicker();
});

【讨论】：

【解决方案2】：

你用什么做数据表？很可能它会在您附加事件后呈现，在这种情况下，它应该有一个事件，如 draw 或其他指示数据已呈现的事件

【讨论】：

是的，我的错，忘记了

【解决方案3】：

试试这个：

$(function() {
    $(document).on("focusin",".datepicker",function(){
        $(this).datepicker();
    });
});

如果它有效，您可以改进每次元素获得焦点时不“重新创建”日期选择器

【讨论】：

【解决方案4】：

事实证明，@Guy 有解决方案...我在 setTimeout 内设置了函数，它开始正常工作：

setTimeout(function() {
        $(".datepicker").datepicker();
    },1000);

我早该想到的……谢谢@Guy！

【讨论】：