Question

我的页面上有一个datepicker输入（称之为X）。有一个按钮，当你点击它时，它会进行ajax调用并在页面上打印一些html内容。在ajax响应中，还有另一个datepicker输入（称之为Y），当你在独立页面上打开它时可以工作，但在ajax调用中，Y不会显示datepicker框（它可以工作）然而，在X）。

Y已经拥有＆＃34; hasDatepicker＆＃34;我试过删除它，然后回想起datePicker方法，但没有运气。我设法修复它的唯一方法是删除＆＃34; ui-datepicker-div＆＃34;来自页面源并在Y上调用datepicker。但这次，X停止工作了！

这种使用datepicker的方法有什么问题？我能以任何方式使它们都正常工作吗？

更新：我已经设法通过在ajax调用之前运行这两个命令然后在ajax调用之后调用datepicker来解决此问题：

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

我不知道为什么，但是destroy命令不会删除ui-datepicker-div，我必须手动删除它！关于这个的任何线索？

Answer 1

动态添加的datepicker

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

<强> Demo

Answer 2

我在这个问题上突破了几天，最后我设法解决了这个问题。

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

是：

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

如果DOM中存在此div，则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();
        }

    });
}

享受，伙计们！

Answer 3

此问题的解决方法是在ajax调用后使用datepicker从元素中删除类hasDatepicker，然后重新初始化datepicker

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

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

Answer 4

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

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

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

Answer 5

这是jQuery的-上面的答案对我来说都不起作用

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

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

5 个答案: