jQuery datepicker不能用於動態插入的html元素

這個問題已經被反覆詢問，並且唯一回答的是其他人試圖在.onReady（）函數中初始化datepicker的問題。我沒有那樣做。實際上，我實際上正在做這個解決方案正在做的事情;在創建元素後立即執行datepicker。jQuery datepicker不能用於動態插入的html元素

這裏是我的模板代碼：

<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（）的引用會引發錯誤。

但是，該字段在收到焦點時沒有響應。日期選擇器不出現。

誰能告訴我有什麼不對？謝謝！

來源

2016-02-19 Kirby L. Wallace

您正試圖在元素存在之前實例化日期選擇器。將代碼放入的異步回調中。

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

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

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

    // PUT DATEPICKER HERE 
});

來源

2016-02-19 20:53:15 Mathletics

確定嗎？ .get（）完成後，我使用.datepicker（）。 .get（）包含append（）。不過，我會嘗試。謝謝。 –

呃，槍的兒子！這工作！你能花一點時間解釋我原來的做法是不存在的嗎？ .get（）是一個異步調用，也許吧？ –

100％是的，'$ .get'是異步的。但正如我所說，你正試圖實例化datepicker之前，你想要綁定它的元素已被插入到DOM（這就是你的'append'調用正在做什麼。） – Mathletics

jQuery datepicker不能用於動態插入的html元素

回答

相關問題