jQuery Datepicker 无法处理动态创建的 HTML
jquery datepicker not working on dynamically created 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 魔术应用于新插入的元素——但我认为这不值得。
我发现为动态添加的多个输入字段添加日期选择器的最简单方法:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
你可以简单地使用它。
$('body').on('focus',".date-picker", function(){
$(this).datepicker();
});
我发现解决此问题的最简单方法是使用 livequery 插件:
http://docs.jquery.com/Plugins/livequery
您告诉 LiveQuery 将其应用于这些对象,而不是将日期选取器应用于特定类的所有对象。反过来,LiveQuery 将继续应用日期选择器,即使以后更改了 DOM。
当usnig这个时,我没有看到性能下降,并且代码更改非常小(您需要将插件添加到页面并且仅更改一行代码(。
您将像这样使用它:
$(".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 类添加对象时,日期选择器插件都会自动应用于它。
绑定日期选取器的代码最好在动态创建 html 后立即执行。如果要将日期选择器初始化的代码保存在单独的文件中,我建议使用以下方法:完成 html 生成后(我假设它是在文档就绪时生成的(,使用
$(document).trigger("customHtmlGenerated");
在日期选择器文件中,而不是$(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 文件运行之后。
我想您初始化日期选择器的代码在创建元素的脚本之前运行,因此没有任何反应。
<小时 />尝试在使用 .load(( 而不是 .ready(( 加载页面时执行 jquery 代码。加载事件在加载所有资产(js、图像...(时触发。
$(window).load(function () {
$(".datepicker").datepicker({
...
});
});
<小时 />你也可以简单地使用javascript的执行方式。脚本按它们在页面中出现的顺序执行。因此,您可以:
- 将脚本移动到结束正文标记"之前
- 确保第一个脚本(创建元素(位于日期选取器代码之前
- 删除日期选取器的 .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。
- 从Javascript和Php变量创建Html模板文档
- 为非列表项目创建HTML实时搜索
- 使用javascript动态创建html内容/元素
- 如何使用jQuery动态创建HTML输入
- 在 JQUERY 中创建 HTML 后,Jquery 方法不起作用
- 使用HTML标记中的JS变量在Javascript中动态创建HTML
- 如何使用jQuery和乘法行和列创建HTML表
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的,如何
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 我需要使用AngularJS从JSON文件创建HTML元素
- 从Ajax Arraybuffer响应类型创建HTML画布
- 创建HTML对象的Javascript与创建HTML字符串的比较
- 在动态创建html元素之后,是否可以触发事件
- 如何在动态创建html时实现分层标题组织
- 如何从输入到url的路径创建html文件
- 从sql server中用javascript创建HTML表
- 如何在表单中创建html元素,而无需重新加载页面
- 做全栈JavaScript框架在客户端或服务器上创建HTML
- 使用JQuery创建HTML父标记
- 在服务器端创建html元素VS将数据作为JSON获取,并使用javascript创建标签