将 datepicker()放在动态创建的元素上-JQuery/JQueryUI

小开

You need to run the .datepicker(); again after you've dynamically created the other textbox elements.

我建议在向 DOM 添加元素的调用的回调方法中这样做。

假设您正在使用 JQuery Load 方法从源中提取元素并将它们加载到 DOM 中，您将执行以下操作:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});

小开

最佳答案

诀窍在于:

$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});

演示

$('...selector..').on('..event..', '...another-selector...', ...callback...);语法的意思是:
为事件 ..event..(在我们的示例中是‘ focus’)向 ...selector..(在我们的示例中是 body)添加一个侦听器。对于匹配选择器 ...another-selector...(在我们的示例中是 .datepicker_recurring_start)的匹配节点的所有后代，应用事件处理程序 ...callback...(在我们的示例中是内联函数)

See http://api.jquery.com/on/ and especially the section about "delegated events"

小开

对我来说，jquery 在以下方面起到了作用:

将“ body”更改为 document

$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});

多亏了 Skafandri

注意: 确保每个字段的 id 不同

小开

Skafandri + 1的绝妙回答

This is just updated to check for hasDatepicker class.

$('body').on('focus',".datepicker", function(){


if( $(this).hasClass('hasDatepicker') === false )  {
$(this).datepicker();
}


});

小开

其他的方法对我都不管用。在我的应用程序中，我使用 jquery 将 date range 元素添加到文档中，然后对它们应用 datepicker。出于某种原因，所有的事件解决方案都不起作用。

This is what finally worked:

$(document).on('changeDate',"#elementid", function(){
alert('event fired');
});

希望这能帮到别人，因为这让我有点后退。

小开

动态元素的新方法是变异观察者. . 下面的示例使用下划线 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
});

小开

确保具有 .date-picker类的元素没有 hasDatepicker类。如果是这样，即使尝试用 $myDatepicker.datepicker();重新初始化也会失败！相反，你需要做的是..。

$myDatepicker.removeClass('hasDatepicker').datepicker();

小开

您可以在 javascript 函数中添加 class. datepicker，以便能够动态地更改输入类型

 $("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

小开

我已经修改了@skafandri 答案，以避免对 .datepicker_recurring_start类的所有输入重新应用 datepicker构造函数。

下面是 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();
});
}

this needs that your input have the class 'mostrar_calendario'

Live 适用于 JQuery 1.3 + 的新版本，需要对其进行“ on”调整

在这里可以看到更多关于差异的信息

小开

$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});

小开

这就是对我有效的方法(使用 jquery datepicker) :

$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});

小开

 $('body').on('focus',".my_date_picker", function(){
$(this).datepicker({
minDate: new Date(),
});
});