Javascript 将datepicker（）放在动态创建的元素上-JQuery/JQueryUI

我已经动态创建了文本框，我希望每个文本框都能够在单击时显示日历。我使用的代码是：

$(".datepicker_recurring_start" ).datepicker();

这将只在第一个文本框上工作，即使我所有的文本框都有一个名为datepicker\u Recurrency\u start的类

---

非常感谢你的帮助

您需要运行

.datepicker（）操作

我建议在向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();
});​


（“…事件…”、“…另一个选择器…”、…回调…”上的
$（“…选择器…”）语法意味着：

为事件
。事件..
（“焦点”在本例中）向
…选择器..
（本例中为
主体
）添加侦听器。对于与选择器
…另一个选择器…
（
.datepicker\u recurrence\u start
在本例中）匹配的所有匹配节点的后代，应用事件处理程序
…回调…
（本例中的内联函数）

请参阅下面关于“委派事件”的部分，尤其是jquery worked的部分：

将“正文”更改为文档

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

多亏了

注意：请确保每个字段的id都不同
斯卡凡德里+1的出色回答

这只是更新以检查hasDatepicker类

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

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

});

其他的解决方案都不适合我。在我的应用程序中，我使用jquery将日期范围元素添加到文档中，然后对它们应用datepicker。因此，由于某种原因，所有事件解决方案都不起作用

这就是最终成功的原因：

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

希望这能帮助到别人，因为这让我有点倒退。
动态元素的新方法是。。下面的示例使用来使用（u.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 answer，以避免将
datepicker
构造函数重新应用到所有带有
.datepicker\u recurrence\u 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);
});

$（'#cmd'）。单击（函数（）{
var new_datepicker=$（''）.datepicker（）；
$（“#内容”）.append（“
a datepicker”）.append（new#datepicker）；
});

这里有一个
这是我在jQuery1.3上的工作原理，在第一次单击/聚焦时显示

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

这需要您的输入具有“mostrar\u calendario”类

Live适用于JQuery 1.3+对于较新版本，您需要将其调整为“on”

更多关于差异的信息，请参见此处
这是对我有效的方法（使用jquery datepicker）：

当您说“动态创建”时，您是指在页面加载之前使用代码隐藏还是在页面加载之后使用javascript？因为如果在页面加载后添加元素，那么每次添加新的文本框时，您都需要重新绑定日历。我正在用PHP将其加载到代码中。我想您可能会感到困惑，但很难用您提供的信息来判断。为了确认一下，你能确认一下“动态创建的文本框”是什么意思吗？如果我正在加载“第一页”，php会查看数据库，看看“第一页”中有多少个日期文本框，然后显示出来。因此，当加载“第一页”时，将有4个文本框需要加载datepicker（）“第二页”有7个文本框，需要加载datepicker（）函数。如果在第一次调用后数据选择器无法工作，请查看以下答案：您的问题可能与datepicker添加自己的类有关：HasDatePicker这是一个可以在任何类型的动态追加中工作的解决方案+1.虽然我觉得奇怪，每次文本框获得焦点时，您都想调用
.datapicker（）
，所以您应该小心使用这种方法（假设我读对了）。不过，我认为您可以使用
.datapicker（）
，因为它可能会在尝试重新创建之前检查是否创建了日期选择器。对于其他代码，您可能没有这种优势。另外，.on（仅在JQuery 1.7中引入-因此请确保您使用的是正确的版本。datepicker足够聪明，可以检查它是否已经创建（顺便说一下，所有jQueryUI组件）如果JQuery版本低于1.7，您可以简单地使用liveYou。您可能需要添加一个筛选器
：not（.hasDatepicker）
小心使用JQuery.clone（）在包含日期选择器的区域内。如果您这样做，则添加此项以删除hasDatepicker类，并且id datepicker将添加到您的输入中：……find（'input.hasDatepicker'）。removeClass（'hasDatepicker'）。removeAttr（'id'））；根据我的经验，这在实践中并不总是有效。最佳情况是向元素添加唯一ID，并使用这些ID引用它们并应用日期选择器。插件内部似乎使用这些选择器。正确-对我来说，我必须使用$（文档）而不是$（'body'）-小片段的代码有点问题。我可以让示例正常工作，但一旦我将一堆javascript添加到小提琴中，这段代码就不再适用于我了。但这都要感谢这两种代码。然后可以将其缩短为
$（'body'）。on（'focus'，”。datepicker:not（.hasDatepicker）”，function（）{$（this.datepicker（）；}）
？完全正确！动态加载的元素最终不是我的问题，所以这个解决方案有效。
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});

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