jquery datepicker在动态创建的html上不起作用
jquery datepicker在动态创建的html上不起作用
提问于 2012-03-10 04:25:08
我用内部控件动态创建了几个div。其中两个控件应该是日期选择器。但是由于某些原因，它们不能显示(只显示输入文本)，如果我创建静态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
});
});为什么datepicker没有出现？
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-08-05 20:21:44
当你写的时候
$(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的listen to DOM changes功能来避免对新插入的元素应用JS魔术--但我不认为这样做是值得的。
Stack Overflow用户
发布于 2018-06-25 01:41:37
我发现添加datepicker的最简单方法是动态添加多个输入字段：
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});Stack Overflow用户
发布于 2018-08-17 18:24:30
你可以简单地使用这个。
$('body').on('focus',".date-picker", function(){
$(this).datepicker();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9640493
复制相关文章
相似问题
腾讯云开发者
