Question

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

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

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

这适用于所有页面，除了我在下面描述的一种情况。

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

谢谢

Answer 1

一种选择是弃用 live方式use on method和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。

DEMO： http://jsfiddle.net/Mq93s/

Answer 2

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

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

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

当从ajax加载html时，获取jQuery datepicker

2 个答案: