jQuery 日期选择器无法处理动态插入的 html 元素

Question

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

这是我的模板代码：

<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>

您会注意到月份选择器 class。此外，您会注意到 "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");

如果我取消注释，我会看到 "here" 警报，所以我知道代码是运行。

datepicker() 没有抛出错误。

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

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

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

Answer 1

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

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

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

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

    // PUT DATEPICKER HERE
});

jQuery 日期选择器无法处理动态插入的 html 元素

jQuery datepicker not working on dynamically inserted html element

javascript

jquery

jquery-ui

jquery-ui-datepicker