jQuery datepicker无法在动态生成的HTML上运行 [英] jQuery datepicker not working on dynamically generated HTML
问题描述
我有此代码:
<div id="infants-data"></div>
for( var i = 1; i <= 10; i++)
{
var currInfantDataField = '' +
'<div class="field">Infant ' + i + ': ' +
'<div style="width:600px">' +
'<select id="infant-' + i + '-title" style="border:solid 1px #cccccc;">'+
'<option selected>--Title--</option>' +
'<option value="master">Master</option>' +
'<option value="miss">Miss</option>' +
'</select>' +
'<input type="text" id="infant-' + i + '-surname" placeholder="Surname" style="width:110px; border:solid 1px #cccccc;">' +
'<input type="text" id="infant-' + i + '-othernames" placeholder="Othernames" style="width:120px; border:solid 1px #cccccc;">' +
'<input type="text" id="infant-' + i + '-birthdate" placeholder="Date of Birth" style="width:120px; border:solid 1px #cccccc;" readonly>' +
'</div>' +
'</div>';
document.getElementById('infants-data').innerHTML += currInfantDataField;
jQuery( "#infant-" + i + "-birthdate").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'1900:<?php echo ( date('Y') - 2 ); ?>',
onSelect: (function(){doSomethingUsefulWithField("infant-" + i + "-birthdate")})
});
}
由于某种原因,我无法解释,日期选择器无法正常工作.
For some reason I can't explain, the datepicker is not working.
PS 我尝试了此和其他几个人喜欢它,但是在我的情况下它们不起作用,因此我问了这个.
P.S I have tried this and several others like it but they did not work in my case, hence my asking this.
推荐答案
您的代码中有两个问题,#1是您继续添加日期选择器,然后覆盖整个innerHtml-破坏了添加的日期选择器.
另一个与事件处理程序有关,该事件处理程序对所有日期选择器使用相同的处理程序(具有相同的i
值)(请参见下面的错误2).
You have two problems in your code, #1 is you keep adding a datepicker and then later overwrite the entire innerHtml - breaking the datepickers added.
The other one is related to the event handler which uses the same handler (with same i
value) for all datepickers (see fix at Bug#2 below).
解决错误#1的一种方法是添加所有html(并仅以提高效率而不是10次更新DOM的方式更新DOM),然后创建所有日期选择器
One way to fix bug #1 is to add all the html (and update the DOM only once for efficency and not 10 times), and then create all the datepicker
请参见JSFiddle: http://jsfiddle.net/byhpc73L/2/
See JSFiddle: http://jsfiddle.net/byhpc73L/2/
错误#2:您遇到一个错误,该错误将参数"i"传递给onSelect处理程序-所有处理程序将使用相同的i
,当循环结束时,该值将为11.您需要关闭以将当前i
值绑定到函数-参见下文.
Bug #2: You have a bug passing the parameter "i" to the onSelect handler - all handlers will use the same i
which will be 11 when the loop finishes. You need a closure to bind the current i
value to a function - see below.
例如
for (var i=1; i<=10; i++) { ... create html string ... }
.. update DOM from html string
for( var i = 1; i <= 10; i++) {
jQuery( "#infant-" + i + "-birthdate").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'1900:2015',
onSelect:(function(ii) { return function(){doSomethingUsefulWithField("infant-" + ii + "-birthdate")}
})(i) /* note the function gets `i` and returns a function bound to the current value */
});
}
这篇关于jQuery datepicker无法在动态生成的HTML上运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!