我已经动态创建了文本框,希望它们每个都能够在单击时显示日历。我使用的代码是:
$(".datepicker_recurring_start" ).datepicker();
即使我所有的文本框都有一个名为datepicker_recurring_start的类,该方法仅在第一个文本框上有效。
非常感谢您的帮助!
我已经动态创建了文本框,希望它们每个都能够在单击时显示日历。我使用的代码是:
$(".datepicker_recurring_start" ).datepicker();
即使我所有的文本框都有一个名为datepicker_recurring_start的类,该方法仅在第一个文本框上有效。
非常感谢您的帮助!
Answers:
这是窍门:
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
该$('...selector..').on('..event..', '...another-selector...', ...callback...);
语法手段:
添加一个监听器...selector..
(在body
我们的例子)的事件..event..
(“焦点”在我们的例子)。对于与选择器匹配的所有匹配节点的后代...another-selector...
(.datepicker_recurring_start
在我们的示例中),应用事件处理程序...callback...
(在我们的示例中为内联函数)
请参阅http://api.jquery.com/on/,尤其是有关“委托事件”的部分
.datapicker()
每次文本框获得焦点时都想调用它似乎很奇怪-所以您还是要谨慎使用此方法(假设我没看错)。但是,我认为您会同意的,.datapicker()
因为它可能会在尝试重新创建之前检查是否创建了日期选择器。对于其他代码,您可能没有这种宽限期。此外,。对(在JQuery的1.7只推出了-所以一定要确保你使用正确的版本。
:not(.hasDatepicker)
对我来说下面的jQuery工作:
将“正文”更改为文档
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
注意:请确保每个字段的ID都不相同
您需要运行 .datepicker();
动态创建其他文本框元素后,再次。
我建议在将元素添加到DOM的调用的回调方法中这样做。
因此,可以说您正在使用JQuery Load方法从源中提取元素并将其加载到DOM中,您将执行以下操作:
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
动态元素的新方法是MutationsObserver .。下面的示例使用underscore.js来使用(_.each)函数。
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {
_.each(repeaterWrapper, function (repeaterItem, index) {
var jq_nodes = $(repeaterItem.addedNodes);
jq_nodes.each(function () {
// Date Picker
$(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
dateFormat: "dd MM, yy",
showAnim: "slideDown",
changeMonth: true,
numberOfMonths: 1
});
});
});
});
observerjQueryPlugins.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
这是对我有用的(使用jQuery datepicker):
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});
我修改了@skafandri答案,以避免将datepicker
构造函数重新应用于.datepicker_recurring_start
类的所有输入。
这是HTML:
<div id="content"></div>
<button id="cmd">add a datepicker</button>
这是JS:
$('#cmd').click(function() {
var new_datepicker = $('<input type="text">').datepicker();
$('#content').append('<br>a datepicker ').append(new_datepicker);
});
这是一个工作演示
这就是我在JQuery 1.3上工作的结果,并且在第一次单击/显示焦点时就显示了
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
这需要您的输入具有类“ mostrar_calendario”
Live适用于JQuery 1.3及更高版本,您需要对此进行调整以适应“ on”状态
在此处查看有关差异的更多信息http://api.jquery.com/live/
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});