Question

我有几个页面从主菜单调用并通过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中，它就能完美地工作。

抱歉这么厚！

Answer 1

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

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

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

<强> another_page.php

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

Answer 2

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

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

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

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

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

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

2 个答案: