[英]jquery datepicker not working on dynamically created html
我正在用內部控件動態創建幾個div。 其中兩個控件應該是datepickers。 但由於某種原因,它們沒有顯示(只顯示輸入文本)如果我創建靜態html,它會起作用,但是當我使用動態html時則不行。
這是我用來生成HTML的代碼(我可以看到div)
var ShowContainerDiv = document.createElement('DIV');
var btnShowDiv = document.createElement('DIV');
btnShowDiv.id = 'btnShowDiv ';
btnShowDiv.title = 'Change';
btnShowDiv.index = 120;
var lblShow = document.createElement('label')
lblShow.htmlFor = "btnShowDiv";
lblShow.appendChild(document.createTextNode('Show'));
btnShowDiv.appendChild(lblShow );
btnShowDiv.onclick = function () {
dropdown.style.visibility = "visible";
};
var dropdown = document.createElement('DIV');
dropdown.style.backgroundColor = 'white';
dropdown.style.borderStyle = 'solid';
dropdown.style.borderWidth = '2px';
dropdown.style.cursor = 'pointer';
dropdown.style.textAlign = 'left';
dropdown.style.width = '150px';
var chkRed = document.createElement("input");
chkRed.type = "checkbox";
chkRed.id = "chkRed";
chkRed.value = "Red";
chkRed.checked = false;
var lblRed = document.createElement('label')
lblRed.htmlFor = "chkRed";
lblRed.style.color = "#F00";
lblRed.appendChild(document.createTextNode('Red'));
var chkYellow = document.createElement("input");
chkYellow.type = "checkbox";
chkYellow.id = "chkYellow";
chkYellow.value = "Yellow";
chkYellow.checked = false;
var lblYellow = document.createElement('label')
lblYellow.htmlFor = "chkYellow";
lblYellow.style.color = "#FF0";
lblYellow.appendChild(document.createTextNode('Yellow'));
var chkGreen = document.createElement("input");
chkGreen.type = "checkbox";
chkGreen.id = "chkGreen";
chkGreen.value = "Green";
chkGreen.checked = false;
var lblGreen = document.createElement('label')
lblGreen.htmlFor = "chkGreen";
lblGreen.style.color = "#0F0";
lblGreen.appendChild(document.createTextNode('Green'));
var dateFrom = document.createElement("input");
dateFrom.id = "txtDateFrom";
dateFrom.type = "text";
dateFrom.className = "datepicker";
dateFrom.style.width = "70px";
dateFrom.readonly = "readonly";
var lblDateFrom = document.createElement('label')
lblDateFrom.htmlFor = "txtDateFrom";
lblDateFrom.appendChild(document.createTextNode('From'));
var dateTo = document.createElement("input");
dateTo.id = "txtDateTo";
dateTo.type = "text";
dateTo.className = "datepicker";
dateTo.style.width = "70px";
dateTo.readonly = "readonly";
var lblDateTo = document.createElement('label')
lblDateTo.htmlFor = "txtDateTo";
lblDateTo.appendChild(document.createTextNode('To'));
var btnDone = document.createElement("input");
btnDone.type = "button";
btnDone.name = "btnDone";
btnDone.value = "Done";
btnDone.onclick = function () {
dropdown.style.visibility = "hidden";
};
dropdown.appendChild(chkRed);
dropdown.appendChild(lblRed);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkYellow);
dropdown.appendChild(lblYellow);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkGreen);
dropdown.appendChild(lblGreen);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateFrom);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateTo);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(btnDone);
ShowContainerDiv.appendChild(btnShowDiv);
ShowContainerDiv.appendChild(dropdown);
g.event.addDomListener(btnShowDiv, 'click', function () {
dropdown.visible = true;
dropdown.style.visibility = "visible";
});
g.event.addDomListener(btnDone, 'click', function () {
dropdown.visible = false;
dropdown.style.visibility = "hidden";
});
map.controls[g.ControlPosition.TOP_RIGHT].push(ShowContainerDiv);
然后在.js文件中我有這個(我檢查過,我包含了文件)
$(document).ready(function () {
$(".datepicker").datepicker({
dateFormat: 'yy/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
showOn: 'both',
autosize: true,
buttonText: "Select date",
buttonImage: '../Content/images/calendar.png',
buttonImageOnly: true
});
});
為什么日期選擇器沒有出現? 謝謝! 吉列爾莫。
當你寫作
$(document).ready(function () {
$(".datepicker").datepicker({...});
});
該片段在頁面加載后立即執行。 因此,您的動態日期選擇器還沒有。 您需要在每個新插入的元素上調用$(aSuitableSelector).datepicker(...)
。 首先,使用var來保存您的選項:
var datePickerOptions = {
dateFormat: 'yy/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
// ...
}
這允許你寫
$(document).ready(function () {
$(".datepicker").datepicker(datePickerOptions);
});
並寫
// right after appending dateFrom to the document ...
$(dateFrom).datepicker(datePickerOptions);
//...
// right after appending dateTo ...
$(dateTo).datepicker(datePickerOptions);
您還可以使用JQuery的能力來監聽DOM更改,以避免將JS魔法應用於新插入的元素 - 但我認為這不值得。
我發現添加datepicker以動態添加多個輸入字段的最簡單方法:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
我發現解決此問題的最簡單方法是使用livequery插件:
http://docs.jquery.com/Plugins/livequery
您可以告訴LiveQuery將其應用於這些對象,而不是將日期選擇器應用於特定類的所有對象。 即使以后更改了DOM,LiveQuery也會繼續應用 datepicker。
我發現在使用它時沒有性能下降,代碼更改實際上是最小的(您需要將插件添加到頁面中,只更改一行代碼)。
你會像這樣使用它:
$(".datepicker").livequery(
function(){
// This function is called when a new object is found.
$(this).datepicker({ ...}});
},
function() {
// This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function.
}
);
從那時起,每次使用datepicker類添加對象時,datepicker插件都會自動應用於它。
你可以簡單地使用它。
$('body').on('focus',".date-picker", function(){
$(this).datepicker();
});
綁定日期選擇器的代碼最好在你的html被動態創建之后執行。 如果你想將datepicker初始化的代碼保存在一個單獨的文件中,我建議采用以下方法:在你完成生成html之后(我認為它是在文檔就緒時生成的),使用
$(document).trigger("customHtmlGenerated");
在datepicker文件中,而不是$(document).ready(function(){...})
使用$(document).bind("customHtmlGenerated", function(){...});
我把它
$( "#InstallDate" ).datepicker({
showOn: "button",
minDate: 0, // no past dates
buttonImage: "../images/Date.png",
buttonImageOnly: true,
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
});
到一個腳本文件DatePicker.js,然后在我生成的Ajax Html表單的末尾添加以下行
<script type='text/javascript' src='/inc/DatePicker.js'></script>
$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});
請在追加元素后添加以下代碼。
$(".datepicker").datepicker({
dateFormat: 'yy/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
showOn: 'both',
autosize: true,
buttonText: "Select date",
buttonImage: '../Content/images/calendar.png',
buttonImageOnly: true
});
文檔准備就緒時執行jQuery代碼:這意味着頁面的初始標記准備就緒,而不是在運行javascript文件之后。
我想你的代碼初始化datepickers運行在創建元素的腳本之前運行,所以沒有任何反應。
使用.load()而不是.ready()加載頁面時嘗試執行jquery代碼。 加載所有資產(js,image ...)時會觸發load事件。
$(window).load(function () {
$(".datepicker").datepicker({
...
});
});
您也可以簡單地使用javascript的執行方式。 腳本按照它們在頁面中發生的順序執行。 所以你可以:
這可能是javascript被解雇的順序問題。 試試看
$(".datepicker").datepicker({
dateFormat: 'yy/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
showOn: 'both',
autosize: true,
buttonText: "Select date",
buttonImage: '../Content/images/calendar.png',
buttonImageOnly: true
});
在你的javascript創建html之后。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.