如果它已经在页面上，则 jquery datepicker 在 ajax 调用后不起作用答案

【问题标题】：jquery datepicker doesn't work after ajax call if its already on page如果它已经在页面上，则 jquery datepicker 在 ajax 调用后不起作用
【发布时间】：2015-02-19 01:39:14
【问题描述】：

我的页面上已经有一个日期选择器输入（称为 X）。有一个按钮，当您单击它时，它会进行 ajax 调用并在页面上打印一些 html 内容。在该 ajax 响应中，还有另一个 datepicker 输入（称为 Y），当您在独立页面上打开它时可以使用，但在 ajax 调用中，Y 不显示 datepicker 框（但是它适用于 X）。

Y 已经有“hasDatepicker”类，我尝试删除它然后调用 datePicker 方法，但没有运气。我设法修复它的唯一方法是从页面源中删除“ui-datepicker-div”并调用 Y 上的日期选择器。但这一次，X 停止工作！

这种使用日期选择器的方式有什么问题？有什么方法可以让它们都正常工作吗？

更新：我已经设法解决了这个问题，方法是在 ajax 调用之前运行这两个命令，然后在 ajax 调用之后调用 datepicker：

jQuery('.datepicker').datepicker("destroy");
jQuery('#ui-datepicker-div').remove();

我不知道为什么，但是destroy命令并没有删除ui-datepicker-div，我必须手动删除它！有什么线索吗？

【问题讨论】：

代码太大，无法复制到这里...我会尝试用它构建一个示例并发布它
非常感谢@Hossain。你也解决了我的问题:)

标签： jquery ajax jquery-ui datepicker

【解决方案1】：

对于动态添加的数据选择器

$('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});

Demo

【讨论】：

运行 $(this).datepicker();根本不起作用（即使使用 FireBug 控制台）！正如我所说，我什至从中删除了 hasDatepicker 类，然后调用了这个方法，但什么也没发生 :-( 你给我的演示很棒。我认为我的 ajax 调用有问题吗？
我正在给你工作演示示例。你的问题是什么？
我在新页面上测试了同样的东西。它工作得很好。但是当我将 ajax 请求更改为我的页面（这是一个完整的联系表单）时，表单上的日期选择器将不起作用。我已经从主页中删除了 datepicker 方法，然后它就起作用了。在进行 ajax 调用之前，我可以关闭页面上的任何日期选择器吗？
您必须在加载 ajax 数据的主页上编写此代码。
专注，是的。我之前尝试点击动态时间选择器，这需要在时间列表渲染之前选择两次字段。 @Sadikhasan 谢谢伙计！！你能解释一下为什么这里只需要焦点而不是点击

【解决方案2】：

我在这个问题上折腾了几天，终于设法解决了。

您只需要在从 DOM 重新初始化之前删除一些由 jQuery 创建的 div。

它是：

jQuery('#ui-datepicker-div').remove();

如果这个 div 存在于 DOM 中，jQuery 不会重新初始化 DatePicker。

我的工作代码在这里：

jQuery(document).ready(function () {
    InitDatePickers();
});
function RemoveDatePickers() {
    jQuery('#ui-datepicker-div').remove();
}
function InitDatePickers() {
    $('#main .date_inp').datepicker($.datepicker.regional["ru"]);
}
function RefreshData() {
    RemoveDatePickers();
    $.ajax({
        type: 'GET',
        url: "/",
        data: GetFiltersData(),
        success: function (data, textStatus) {
            $("#main").html(data);
            InitDatePickers();
        }

    });
}

享受吧，伙计们！

【讨论】：

【解决方案3】：

我针对这个问题的工作解决方案是在 ajax 调用后使用 datepicker 从元素中删除类 hasDatepicker，然后重新初始化 datepicker

$("#start").removeClass("hasDatepicker");

jQuery("#start").datepicker({ constrainInput: false, dateFormat: "yy-mm-dd", showButtonPanel: true });

【讨论】：

这是唯一对我有用的解决方案， - 在 reinit 工作之前删除类，但是删除 #ui-datepicker-div 没有。很奇怪。

【解决方案4】：

由 AJAX 添加的元素没有继承地绑定到它们的方法或事件，因为它们是在 DOM 加载后创建的。您可以使用事件委托解决此问题。但是，对于您正在尝试做的事情，有一种更好的方法。与其在之后添加日期选择器，不如直接隐藏它？如果这不是一个选项，那么您需要在您的 ajax 成功中重新绑定 datepicker 实例。

success: function(data){
    $('body').append(//code to create new_ele);

    //fire off the datepicker again.
    $('new_ele').datepicker();
}

【讨论】：

在成功调用 ajax 后，我曾尝试再次启动 datepicker 方法，但没有成功！你能给我举个关于事件委托的例子吗？另外，我应该如何隐藏日期选择器（对不起，我没有明白你的意思）？
在页面加载时页面上已经存在日期选择器。将其显示设置为 display:none，然后在 ajax 成功函数中使用 jQuery 切换其可见性。

【解决方案5】：

这来自 jQuery - 上面的答案都不适合我：

    $.ajax({url: 'refresh.html', success: function(data) {
          $('#myDiv').html(data). // Load response
                find('input.datepicker').datepicker(); // And reinitialise datepickers
    }});

【讨论】：