DatePicker 在 ajax 加载页面中不起作用

Question

我将日期选择器附加到全局脚本文件中的输入，如下所示：

$(document).on("focusin",".datePick", function () {
            $(this).datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth: true,
                changeYear: true,
                onClose: function () { $(this).valid(); }
            });
        });

在特定页面上，模式对话框（也是 jquery ui）中有输入（将与 datepicker 一起使用），我通过 $.load() 调用该页面并注入其他页面中的 div。

上面的代码对于其他页面中的静态输入非常有效，但是对于上面的场景，它可以很好地显示日期选择器对话框，但是当我单击日期时，它会抛出错误（f 未定义）编辑：VS2010 抛出“无法设置属性'currentDay'的值：对象为空或未定义"

有人建议使用 live() 方法，但我不想使用已弃用的方法.. 这个问题我该怎么办？

提前致谢

奥兹古

Answer 1

我遇到了这个确切的错误，虽然我的回答不会帮助 OP，但也许它会在未来帮助其他人。

当我与页面中的另一个元素发生 ID 冲突时收到此错误消息。

Answer 2

正如我在对 TJ VanToll 的回答的评论中提到的，只要在加载 DOM 时存在绑定触发器的父元素，就可以了。

有关示例，请参阅 this fiddle。

JS：

$(function(){
    $(document).on("focusin",".datePick", function () {
       $(this).datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            onClose: function () { $(this).valid(); }
        });
    });

    $('#focusin').append('<input class="datePick" name="datepicker" />');

});​

HTML：

<div id="focusin"></div>​

只要您的模态 div 在加载时存在，它就应该能够在加载后捕获您的输入。

Answer 3

使用 live、delegate 或 on 不适用于 jQuery UI 小部件，因为它们是有状态的插件，必须在必要的 DOM 节点存在后进行实例化。

您可以通过在注入附加标记后实例化日期选择器来完成您正在寻找的内容。这是一个这样做的例子 - http://jsfiddle.net/tj_vantoll/qN8dG/2/。