Question

我在div中有一个jquery datepicker，它通过ajax更新。我可以在整个页面重新加载后打开一次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"/>

Datepicker以这种方式构建：

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

我需要做什么，每次div通过ajax更新时都能看到datepicker？一些建议的datepicker要在ajax成功时刷新，我没有按照这种方式工作，或者不知道怎么做！

Answer 1

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

将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将是它的共同名词或形容词！

Answer 2

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

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

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

2 个答案: