jQuery datepicker 不适用于动态插入的 html 元素答案

【问题标题】：jQuery datepicker not working on dynamically inserted html elementjQuery datepicker 不适用于动态插入的 html 元素
【发布时间】：2016-02-19 20:51:18
【问题描述】：

同样的问题已经被反复问过，唯一一次得到回答的是那个家伙试图在 .onReady() 函数中初始化 datepicker。我不这样做。事实上，我实际上正在做那个解决方案正在做的事情；创建元素后立即执行日期选择器。

这是我的模板代码：

<input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16>

您会注意到月份选择器类。此外，您会注意到“XXX”占位符。

这是插入该模板代码的代码：

//
// find the next available id
//

for (var i = 0; ; i++) {
    if (!$("#divEmployer_" + i.toString()).length) {
        break;
    }
}


//
// get html, and replace the placeholders with id, then append.
//

$.get("content/contentHistoryEmployerTemplate.html", function (data) {

    while (data.indexOf("XXX") >= 0) {
        data = data.replace("XXX", i.toString());
    }

    $("#employerDIV").append(data);
});


//
// activate datepicker on all month-picker class elements
//

$('.month-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function (dateText, inst) {
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
});

//alert("here");

如果我取消注释，我确实会看到“此处”警报，所以我知道代码正在运行。

datepicker() 不会引发错误。

我知道该函数可用，因为如果我在 <HEAD> 中注释掉我的 jquery-ui-min.js，那么对 datepicker() 的引用会引发错误。

但该字段在获得焦点时没有响应。日期选择器没有出现。

谁能告诉我怎么了？谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

您正试图在元素存在之前实例化日期选择器。将该代码放入异步回调中。

$.get("content/contentHistoryEmployerTemplate.html", function (data) {

    while (data.indexOf("XXX") >= 0) {
        data = data.replace("XXX", i.toString());
    }

    $("#employerDIV").append(data);

    // PUT DATEPICKER HERE
});

【讨论】：

你确定吗？我在 .get() 完成后使用 .datepicker() 。 .get() 包括 append()。不过，我会尝试的。谢谢。
好吧，枪的儿子！那行得通！你能花点时间解释一下这个元素是如何以我最初的方式不存在的吗？ .get() 是异步调用吗？
100% 是的，$.get 是异步的。但就像我说的那样，您正试图在要将其绑定到的元素插入 DOM 之前实例化日期选择器（这就是您的 append 调用正在做的事情。）
我很清楚......我试图在元素存在之前实例化选择器，因为 .get() 是异步的。正确的？ .get() 被触发，然后立即引用日期选择器。但是因为 .get() 是异步的，所以 .append() 还没有发生。这是正确的理解吗？再次感谢！
是的；回调（包含append）在get 请求返回之前不会运行。正如您所拥有的，日期选择器代码在该回调触发之前运行。我的更新修复了它。