jQuery datePicker仅在页面的第一个实例化时显示

时间:2016-06-27 18:56:24

标签: jquery jquery-ui datepicker

我有几个页面从主菜单调用并通过jQuery加载到内容div中。这些页面中的大多数都包含一个jQuery UI datePicker小部件。

在每种情况下,当页面是从菜单(index.php)加载的第一个“datepicker页面”时,datePicker正常工作。

但是,一旦更换了初始的“datepicker页面”(即使它被自身替换),datePicker也无法运行。

$.datepicker.setDefaults({
    showOn: "focus",
    showOtherMonths:true,
    selectOtherMonths:true,
    numberOfMonths:[4,3],
    defaultDate : -330
   });

$(function() {
     $("input#begdate" ).datepicker();
     $("input#enddate" ).datepicker();
     $("input#received").datepicker();
     $("input#due").datepicker();
     $("input#dtpaid").datepicker();
 });

如果我加载了一个datePicker页面之外的页面,那么加载了datepicker的第一页就会正常运行。

谢谢!

好的,我改变了一些东西。但我仍然有相同的结果。此代码是脚本中的第一个代码(在document.ready之后),用于关联页面

$(function() {
       init_datepickers();
     });


      function init_datepickers() {
         $( "input#received" ).datepicker();
         $( "input#due" ).datepicker();
         $( "input#eddue" ).datepicker();
         $( "input#edreceived" ).datepicker();
     }

我不明白为什么这不起作用。只要页面独立而不加载到div中,它就能完美地工作。

抱歉这么厚!

2 个答案:

答案 0 :(得分:1)

您可以使用以下内容重新初始化所有数据贴纸元素:

$('.datepickerDIV').load('name_of_file.php', function(){
    $( ".datepickerDIV" ).datepicker();
});

或者,您可以在加载内容中包含具有相同信息的脚本标记。首先显然是可取的,但第二种方法也有效。

<强> another_page.php

<script>
    $( "#datepicker3" ).datepicker();
</script>
<div id="datepicker3" class="datepickerDIV"></div>

答案 1 :(得分:0)

问题是你只在首次加载$()时初始化它们 - 每个新的日期选择器在加载后也需要初始化。

您可以为所有日期选择工具提供css类,例如css='data-datepicker',然后在每次加载新内容时对其进行初始化:

$(function() {
    init_datepickers();
});

function init_datepickers() {
    $(".data-datepicker").datepicker();
}

...
    $.ajax(...
    ).complete(function() { init_datepickers(); })