将 datepicker() 放在动态创建的元素上 - JQuery/JQueryUI
putting datepicker() on dynamically created elements - JQuery/JQueryUI
我已经动态创建了文本框,我希望每个文本框都能够在单击时显示日历。我使用的代码是:
$(".datepicker_recurring_start" ).datepicker();
这仅适用于第一个文本框,即使我所有的文本框都有一个名为 datepicker_recurring_start 的类。
非常感谢您的帮助!
这是诀窍:
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
演示
$('...selector..').on('..event..', '...another-selector...', ...callback...);
语法意味着:
将侦听器添加到事件..event..
(示例中的body
)...selector..
(示例中为"焦点")。对于与选择器...another-selector...
匹配节点的所有后代(在我们的示例中.datepicker_recurring_start
),应用事件处理程序...callback...
(示例中的内联函数)
请参阅 http://api.jquery.com/on/,尤其是有关"委派事件"的部分
,下面的jquery有效:
将"正文"更改为文档
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
感谢斯卡凡德里
注意:确保每个字段的 ID 都不同
斯卡凡德里的出色回答 +1
这刚刚更新以检查hasDatepicker类。
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
确保具有 .date-picker
类的元素还没有hasDatepicker
类。如果是这样,即使尝试使用 $myDatepicker.datepicker();
重新初始化也会失败!相反,您需要做...
$myDatepicker.removeClass('hasDatepicker').datepicker();
在动态创建其他文本框元素后,需要再次运行.datepicker();
。
我建议在将元素添加到 DOM 的调用的回调方法中这样做。
因此,假设您使用 JQuery Load 方法从源中提取元素并将它们加载到 DOM 中,您将执行以下操作:
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
这是对我有用的(使用 jquery 日期选择器):
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});
动态元素的新方法是MutationsObserver ..下面的示例使用下划线.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
});
$('body').on('focus',".my_date_picker", function(){
$(this).datepicker({
minDate: new Date(),
});
});
其他解决方案都不适合我。在我的应用程序中,我使用 jquery 将日期范围元素添加到文档中,然后对它们应用日期选择器。因此,由于某种原因,所有事件解决方案都不起作用。
这是最终奏效的方法:
$(document).on('changeDate',"#elementid", function(){
alert('event fired');
});
希望这对某人有所帮助,因为这让我有点退缩。
您可以在 JavaScript 函数中添加类 .datepicker,以便能够动态更改输入类型
$("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
我已经修改了@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+ 对于较新版本,您需要将其适应"开"
在此处查看有关差异的更多信息 http://api.jquery.com/live/
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});
- 可以't附加html元素jquery
- 循环遍历元素jquery选择器
- 在ajax加载的元素jquery上包含现有的jquery函数
- 如何删除元素列表中的类并添加到另一个元素 Jquery.
- 获取单击的类元素 jQuery 的名称值
- 获取上一个元素 jQuery 的内容
- 根据另一个元素的更改获取一个元素(jquery)
- 区分不同的可拖放元素(jQuery 拖放)
- 除了最后一个<td>元素-Jquery
- 获取子元素jQuery的单选按钮值
- 捕获元素jquery外部的mousedown事件
- .append到非DOM元素jQuery
- 获取其父元素的精确子元素.Jquery
- 获取重复结构中的特定元素jquery
- 捕获隐藏输入元素jQuery的值
- 使用onclick函数获取点击的元素jquery
- 返回父元素 jquery 中的输入值
- 按属性查找元素 jQuery
- 选择元素 jQuery
- 按子元素 - jQuery 的数据 ID 对 li 进行排序