31
我有一個動態的DOM在這裏工作，並調用了jQuery UI的日期選擇器與一個特定的類名稱的所有投入，在這種情況下.date爲什麼jQuery UI的datepicker與動態DOM斷開？
它與第一，靜態的偉大工程，構建但是當我克隆事件處理程序似乎不想移動。我得到的螢火蟲錯誤：
inst is undefined
我試圖尋找到jQuery的新live()功能，但不能將二者結合起來。有任何想法嗎？
A
回答
38
啊，明白了。在將HTML附加到DOM後，我在所有輸入上運行這個輸入，我希望有一個datepicker彈出。 Datepicker爲它所附帶的元素添加一個類，因此我們可以過濾掉現有的輸入並且僅將其應用於新的輸入。
$('.date').not('.hasDatePicker').datepicker();
我希望這可以幫助人，因爲我是谷歌搜索了幾天，沒發現什麼！
您還應該注意，通過將生成的HTML設置爲上下文而不是整個頁面來檢查input.date會更快，因爲這會節省時間，因爲這是一種更高效的操作。
6
我有一個類似的問題，我有一個頁面上的多個表，每個有多個日期選擇器，也點擊按鈕「AddLine」它添加了一個表格行與動態HTML和日期選擇器。
我很多的搜索，我的日期輸入，沒有「身份證」定義他們看上去像這樣
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
：jQuery是所有日期字段的值指向第一個日期字段頁面上定義後實現，日曆會彈出上的所有日期字段，但第一個日期字段的值會發生變化，我加入了「身份證」了這樣的
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
更改HTML和它開始工作，爲動態日期字段我改變這樣的Id這樣的
個var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
2
使用jQuery選擇：
$(".mydatepicker:not(.hasDatepicker)").datepicker()
0
我經歷了同樣的症狀，在該致具有包含元件具有相同id屬性作爲輸入一個TD，
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
我無論如何，這並不理想，但值得一提的是，datepicker組件似乎依賴於id的唯一性。
0
我有這個問題。我的情況最終是因爲我有另一個具有與datepicker輸入相同的ID的元素。
3
使用
$j(id or class).removeClass('hasDatepicker').datepicker();
據工作
4
你需要使用「現場」活動，使之與動態DOM工作。所以，如果您的日期選擇器輸入類是「日期輸入」，下面的代碼將使其工作：在jQuery的UI庫的頁面上
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
1
多個實例會造成這個錯誤了。刪除冗餘實例爲我的案件工作
0
今天我面臨同樣的問題......我在我的應用程序中使用datetimepicker插件。
也使用jquery的默認日期選擇器。當我在文檔準備好時調用它們時，我得到錯誤inst is undefined。
$(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine('attach');
....
});
所以我改變了代碼文檔之前調用準備象下面這樣：
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine('attach');
....
});
現在，每一件事情是工作的罰款。沒問題。
0
如果它仍然不起作用，那是因爲克隆的id。您可以像這樣完全刪除datepicker：$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
0
我有一個類似的問題，數據選取器在第一次調用後不工作。我找到了答案，我的問題在這裏：
http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
我是動態地從模板克隆段和無意中包括日期選擇器添加類一旦其稱爲：
hasDatepicker
我把我的第一個日期選擇器調用在我克隆模板之後，就做到了。然後我加了一個日期選擇器調用clone的每個實例後：
$(source).clone().appendTo(destination).find(".datepicker").datepicker();
3
這可能是晚了一點，但所有上述建議並沒有爲我工作，我想出了這個簡單的解決辦法。
首先，是什麼導致問題： JQuery將日期選擇器分配給元素ID。如果你是克隆元素，那麼同樣的id也可能被克隆。哪些jQuery不喜歡。您最終可能會收到空引用錯誤或分配給第一個輸入字段的日期，無論您單擊哪個輸入字段。
解決方案：
1）破壞日期選擇器 2）分配新的唯一的ID給所有輸入字段 3）指定日期選擇器爲每個輸入
確認您輸入的是這樣的
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
克隆之前，銷燬datepicker
$('.n1datepicker').datepicker('destroy');
後你克隆，添加這些行以及
var i = 0;
$('.n1datepicker').each(function() {
$(this).attr("id",'date' + i).datepicker();
i++;
});
，奇蹟發生了
0
想很多，這裏的答案後，這是對我工作，是表示第一次點擊/集中
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function() {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
這需要您輸入有類「mostrar_calendario」
住的是jQuery的1.3+的新版本你需要這個適應「的」
查看更多有關的區別就在這裏http://api.jquery.com/live/
意志，非常感謝！你保存了我幾個小時的生活:) – ep3static 2009-10-07 18:36:31
當我使用動態DOM時，這個解決方案並沒有幫助我，當我（jQuery）克隆表事件的錶行。我的解決方案是做$（'。date'）。removeClass（'hasDatepicker'）。datepicker（）; – David 2010-02-01 12:22:35
David，你使用的是什麼jQuery核心和UI版本？這是分別爲1.3.2和1.7，該解決方案已與其他實現工作。不管怎樣漂浮你的船！ – 2010-02-01 14:41:29