ajax div重新加载后datepicker不会启动答案

【问题标题】：datepicker wont start after ajax div reloadajax div重新加载后datepicker不会启动
【发布时间】：2013-07-31 16:39:29
【问题描述】：

我在通过 ajax 更新的 div 中有一个 jquery datepicker。我可以在整个页面重新加载后打开一次 datepicker，但是在 ajax 只更新一个包含 datepicker 输入的 div 之后，我看不到 datepicker。我尝试了一个解决类似问题的解决方案，但没有运气。

我对 jquery 和 ajax 不是很熟悉，所以也许有人可以立即看到问题。

我有一个包含 ajax 的 jquery 函数：

function example(){
$.ajax({
  url: "page.php",
  cache: false, 
  success: function(data){
    $('#div').html(data);
  }
});

}

Ajax 重新加载一个 div，里面有一个 datepicker 输入，看起来像这样：

<input type="text" id="datepicker"/>

日期选择器是这样构造的：

$(function() {
    $("#datepicker").datepicker({dateFormat: "dd.mm.yy"});
    $.datepicker.setDefaults(
        $.extend(
            {'dateFormat':'yy-mm-dd'},
            $.datepicker.regional['fi']
        )
    );
});

我必须做什么，才能在每次通过 ajax 更新 div 时看到 datepicker？一些建议 datepicker 在 ajax 成功时刷新，我没有让它以这种方式工作，或者不知道如何！

【问题讨论】：

标签： jquery ajax datepicker

【解决方案1】：

一种方法是在 ajax 成功时重新运行 .datepicker() 初始化程序。

将日期选择器代码更改为：

function applyDatepicker(elem) {
    $(elem).datepicker({dateFormat: "dd.mm.yy"});
    //... Your datepicker code
}

然后一旦文件准备好：

$(document).ready(function(){
    applyDatepicker('#datepicker');
})

在你的 ajax 成功回调中一次：

$.ajax({
    //... other ajax params,
    success: function(){
        //... success callback code
        applyDatepicker('#datepicker');
    }
});

另外，正如@adrenalin 所建议的那样，找出最佳实践的唯一方法是更多地了解您的代码。

建议将元素更改为具有class="datepicker" 而不是id，主要原因是页面中可能有多个日期选择器，并且ID 总是唯一的。作为初学者，我建议最简单的方法是尝试将 ID 想象为元素的专有名词，而 Class 将是普通名词或形容词！

【讨论】：

datepicker 初始化程序现在位于 page.php 中（在 ajax 正在调用的页面内）。那是我可以让它工作的唯一地方。 ajax jquery 是否应该在同一个页面上让它按你的方式工作？
工作是指在重新加载整个页面时工作。我尝试了你告诉我的方式，但即使重新加载整个页面，我也无法启动 datepicker。
您将以上所有内容添加到主页中。这是进行 ajax 调用的页面，而不是通过 ajax 加载/调用的页面。对您的实际代码一无所知，我只能建议它很可能与您拥有执行 ajax 调用的代码所在的页面位于同一页面中。
非常感谢！在将所有脚本添加到主页并从我的代码中删除额外的')'之后，它现在可以工作了:)，就像你说的那样。谢谢！

【解决方案2】：

需要初始化日期选择器，因为您使用 AJAX 加载的那个是全新的元素，并且在您最初初始化它时不存在。任何原始事件都不再绑定到新元素。在 AJAX 加载成功回调上执行此操作（这取决于您执行此操作的方式。

这实际上取决于代码是如何构造的以判断最佳实践是什么，但是如果您通常只在一个地方加载内容，请重复日期选择器初始化或将其包装在一个函数中并在任何地方调用它是需要的。

【讨论】：