当从 ajax 加载 html 时，让 jQuery datepicker 生效

Posted 2023-05-07

【中文标题】当从 ajax 加载 html 时，让 jQuery datepicker 生效

【英文标题】：Getting jQuery datepicker live, when html is loaded from ajax

【发布时间】：2012-05-15 04:03:55

【问题描述】：

我在所有表单上都定义了以下 jQuery 脚本。

$( "input:text.datepicker" ).datepicker( 
    yearRange: "1900:+0",
    changeMonth: true,
    changeYear: true
);

基本上，这会在任何文本类型且具有“datepicker”类的输入元素上调用日期选择器。

这在所有页面上都可以正常工作，除了我在下面描述的一种情况。

我必须通过 ajax 加载一个表单，然后将其显示在一个 jQueryUI 对话框中。在此对话框中，我只能让日期选择器显示 如果 我再次包含 java 脚本代码。显然我不想包含两次代码。有没有办法让新加载的文本框以某种方式显示日期选择器？

谢谢

【参考方案1】：

一种选择是use on method 以已弃用 live 方式和click event 来初始化 Datepicker：

$('body').on('click', 'input.datepicker', function(event) 
    $(this).datepicker(
        showOn: 'focus',
        yearRange: '1900:+0',
        changeMonth: true,
        changeYear: true
    ).focus();
);

此代码应放在$(document).ready 部分。

注意showOn: 'focus'选项，初始化后触发focus event。

演示： http://jsfiddle.net/Mq93s/

【讨论】：

(1) 每个输入只需要调用一次.datepicker()，日期选择器足够聪明，不会进行双重绑定，所以这没什么大不了的。 (2) 如果您使用buttonImage 选项，这将无法正常工作。

@muistooshort 这是对我回答的评论吗？ :)

是的，只是指出了点击绑定方法的一些注意事项。

【参考方案2】：

这里的问题是，当执行日期选择器代码时，您的表单元素还不存在，因此它无法将其转换为日期选择器。您可以通过以下任一方式绕过此问题：

将 datepicker 代码移动到一个单独的函数中，然后您将在 document.ready 事件的所有页面中手动调用该函数。这样它只会被声明一次，你也可以在你的ajax页面中调用它，只有当ajax调用完成而不是ready事件时你才会调用它。 由于您知道要在表单中加载的内容，因此您可以仅将给定的输入转换为日期选择器。这不是一个干净的解决方案，因为如果您要更改日期选择器中的某些内容，至少有两个地方可以修改。

这两种方法都有效，选择取决于您，因为您知道哪个版本更适合您的项目 :)

【讨论】：

您好，感谢您的想法。我已经尝试过选项 1，通过在加载 html 后调用该函数，它可以完美运行。我之前实际上已经尝试过，但是我在显示对话框之前调用了该函数，但这不起作用。现在我在显示对话框后调用它，它可以工作了。