Question

//这里是调用日期选择器的代码

 <script type="text/javascript">
     $(function () {
       $(".datepicker").datepicker({
        constrainInput: true,
        showOn: 'button',
        buttonText: 'Select...'
    });

});
</script>
<input class="datepicker" disabled="disabled" />

//我在这里进行ajax调用

function reFresh(name){
            $.ajax({
            type:"GET",
            url:"Phase",
            data:{projectName:name},
            async: false,
            dataType:"html",
            success:function(data) {
               $("#Left_Panel").html(data);

            },
            error:function() {
                alert("Error ! In fetching data.");
            }
        })

}

//使用ajax再次访问第一页后，现在datepicker无法正常工作。

Answer 1

假设持有datepicker的元素包含在#Left_Panel元素中，那么问题是因为该元素被销毁并重新创建，因此原始事件处理程序将丢失。要解决此问题，您需要在AJAX完成后在元素上重新实现库。

另请注意，使用aysnc: false是非常糟糕的做法 - 事实上，浏览器会在控制台中向您发出警告，告诉您不要这样做。

试试这个：

function reFresh(name){
  $.ajax({
    type: "GET",
    url: "Phase",
    data: { projectName: name },
    dataType: "html",
    success: function(data) {
      $("#Left_Panel").html(data).find('.datepicker').datepicker({
        constrainInput: true,
        showOn: 'button',
        buttonText: 'Select...'
      });
    },
    error: function() {
      alert("Error ! In fetching data.");
    }
  })
}

Answer 2

我建议你这样走。

首先，在初始化datepicker的地方创建函数：

function refreshDatepicker() {
    $(".datepicker").datepicker({
        constrainInput: true,
        showOn: 'button',
        buttonText: 'Select...'
    });
}

其次，在需要它时调用此函数 - 在DOM加载之后，在ajax调用之后等。这样它将更容易维护：

$(function() {
    refreshDatepicker();
});

第三，从ajax成功获取数据后再次调用此函数，因此它将重新启动DOM中的所有日期选择器。

success: function(data) {
    $("#Left_Panel").html(data);
    refreshDatepicker();
}

如果这不起作用，则问题在于获取的数据。检查来自ajax的数据是否合适，然后检查它是否包含类datepicker等的输入。否则我不明白为什么这不起作用。如果您在控制台中收到任何错误，请告诉我。

在进行ajax调用后，datepicker无法正常工作

2 个答案: