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

Posted 2023-05-08

【中文标题】DatePicker 在 ajax 加载页面中不起作用

【英文标题】：DatePicker not working in ajax loaded page

【发布时间】：2012-07-10 01:33:59

【问题描述】：

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

$(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() 方法，但我不想使用已弃用的方法.. 这个问题我该怎么办？

提前致谢

奥兹古

【问题讨论】：

你能创建一个这样的 jsFiddle 示例吗？

【参考方案1】：

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

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

【参考方案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 在加载时存在，它就应该能够在加载后捕获您的输入。

【讨论】：

我使用 $("containerDiv").load("thePageWithModalDialog.aspx") 获取整个页面（其中包含模式对话框的 div、其他内容和脚本 - 工作正常 -）。所以模态对话框的 div 在页面加载时不存在。初始化对话框和日期选择器的脚本工作正常，但仅单击日期不起作用。

当我对 Div 进行静态编码时，现在它可以工作了，感谢您的回答。

【参考方案3】：

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

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

【讨论】：

这是不真实的。 .on() 等人会冒泡 dom，因此只要将处理程序绑定到页面加载时存在的元素，它仍然会在 DOM 初始化后创建的事件上触发。 jsfiddle.net/dwesm

你是对的。我只是明白你不能使用on 让元素自动成为小部件，但你是对的，你可以捕获冒泡事件并采取行动。在这种情况下，您的方法将起作用，因为被捕获的事件是本机 <input /> 节点抛出的事件。这种方法不适用于 datepicker 的 beforeShow 事件，因为注入的 <input /> 还不是 ui.datepicker。