使日期选择器生效 - JQuery答案

【问题标题】：Making datepicker live - JQuery使日期选择器生效 - JQuery
【发布时间】：2011-07-06 18:35:57
【问题描述】：

我知道当你动态创建一个元素时，你必须使用类似的东西：

$("#id").live("click", function() {
    //something
});

现在我有这个：

$('#tdInput1').datepicker({
    inline: true
});

我的问题是：我如何使这个活，以便它可以与动态创建的元素交互。

【问题讨论】：

所以你想在某些元素上运行.datepicker({})，因为它们是动态加载到DOM中的？

标签： jquery jquery-ui datepicker

【解决方案1】：

接受的解决方案不适用于键盘焦点事件。所以我不得不改为：

$('.parent').on('focusin', '.datepicker', function(e) {
    $(this).datepicker(options);
});

必须将 .live 更改为 .on，因为 jquery 1.9.1 不包含 .live 方法。以上适用于鼠标事件以及键盘焦点事件。

【讨论】：

我只尝试过这个，但它给我的错误是没有 datepicker 方法。你能帮我吗
@Sanyamjain 您使用的是哪个版本的 jQuery？
我使用的是 1.9.1 版本。如果我写 $('#datepicker').datepicker();，它工作正常，但如果我使用点击方法，它说没有方法存在 datepicker

【解决方案2】：

根据：Jquery .live works but not with .datepicker

这应该可行：

$("#tdInput1").live("click", function(){
    $(this).datepicker({ 
        inline: true 
    });
});

编辑：此答案适用于旧版本的 jQuery。对于 jQuery 1.9+，请尝试 Vishal 的回答。

【讨论】：

【解决方案3】：

你正在处理两个不同的事情。 jQuery 的live 用于事件绑定，而datepicker 并不专门与事件绑定，而只是在某个时刻向元素添加功能。

live 处理事件的唯一原因是 jQuery 实际上将事件处理程序附加到祖先元素，并且（感谢事件在 javascript 中冒泡的方式），祖先实际上接收事件并将其委托给它来自元素。原理有点复杂，但又长又短，它只适用于事件。

如果您想添加日期选择器功能，只需在新元素创建后调用datepicker 函数即可。

【讨论】：

谢谢..一直试图解决这个问题，直到我找到你的答案

【解决方案4】：

我认为更合适的解决方案是：

$('input.datepickerClass').live('focus', function(){
    if (false == $(this).hasClass('hasDatepicker')) {
        $(this).datepicker({ options });
    }
});

【讨论】：

请避免只回答源代码 - 解释你在做什么，以便读者理解你想说什么以及为什么。