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

时间:2012-05-06 06:31:26

标签: jquery-ui jquery datepicker

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

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

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

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

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

谢谢

2 个答案:

答案 0 :(得分:9)

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

答案 1 :(得分:2)

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

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