jquery datepicker不能动态创建html
我正在用内部控件动态创建几个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 }); });
为什么日期选择器没有出现？ 谢谢！ 吉列尔莫。
当你写作
$(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魔法应用于新插入的元素 – 但我认为这不值得。
我找到解决此问题的最简单方法是使用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插件应用于该对象。
我发现添加datepicker以动态添加多个输入字段的最简单方法：
$('body').on('focus',".datepicker", function(){ $(this).datepicker(); });
你可以简单地使用它。
$('body').on('focus',".date-picker", function(){ $(this).datepicker(); });
绑定datepickers的代码最好在你的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表单的末尾添加以下行
$( ".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：“选择日期”， buttonImage：’../ Content / images / calendar.png’，buttonImageOnly：true}）;
文档准备就绪时执行jQuery代码：这意味着页面的初始标记准备就绪，而不是在运行javascript文件之后。
我想你的代码初始化datepickers运行在创建元素的脚本之前运行，所以没有任何反应。
使用.load（）而不是.ready（）加载页面时尝试执行jquery代码。 加载所有资产（js，image …）时会触发load事件。
$(window).load(function () { $(".datepicker").datepicker({ ... }); });
您也可以简单地使用javascript的执行方式。 脚本按照它们在页面中发生的顺序执行。 所以你可以：
- 在结束体标记“`之前移动你的脚本
- 确保你的第一个脚本（创建元素）出现在datepicker代码之前
- 删除日期选择器的.ready（）处理程序。 当您将脚本放在最后时，它们在DOM准备就绪时隐式运行…
这可能是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之后。