Question

我有这样的日期选择器的Javascript代码：

$(document).ready(function(){
    $("#date").Datepicker({
        Field: '#date',
        Format: "YYYY/MM/DD",
        date: true,
        format: 'YYYY/MM/DD'
    });
});

Date元素正常工作。但是当我编辑我的帖子时，我用AJAX创建了日期元素。当我再次单击日期元素时，日期选择器不起作用，也不会向我显示任何错误。

AJAX代码：

$(document).on("click", ".edit-btn", function () {
     $.ajax({
        type: 'put',
        url: 'edit',
        data: $(".form").serialize(),
        success: function (result) {
            $('#ajax_div').html(result);
        }
    })
})

Answer 1

它无法正常工作，因为您的文档已经完成。之后加载了AJAX。

您可以使用

$( document ).ajaxComplete()

在这里看到完整的文档： http://api.jquery.com/ajaxcomplete/

PS。我从未使用它，我刚刚发现它。

修改

它应该是这样的：

$(document).ajaxComplete(function(){
    $("#date").Datepicker({
        Field: '#date',
        Format: "YYYY/MM/DD",
        date: true,
        format: 'YYYY/MM/DD'
    });
});

Answer 2

试试这段代码：

$('body').on('focus',"#date", function(){
    $(this).datepicker({
      date: true,
      format: 'YYYY/MM/DD'
    });
});

Answer 3

动态附加HTML代码后，您需要调用日期选择器代码。要解决此问题，请将代码放在函数中：

function enableDatePicker() {
    $("#date").Datepicker({
        Field: '#date',
        Format: "YYYY/MM/DD",
        date: true,
        format: 'YYYY/MM/DD'
    });
}

立即称呼它：

$(document).ready(function(){
    enableDatePicker();
});

在添加HTML之后调用：

$(document).on("click", ".edit-btn", function () {
     $.ajax({
        type: 'put',
        url: 'edit',
        data: $(".form").serialize(),
        success: function (result) {
            $('#ajax_div').html(result);
            enableDatePicker(); // Call it again
        },
    })
});

此外，我看到的另一个问题是您在ID为.Datepicker()的元素上调用date，该元素声明只有一个元素id（因为HTML dom应该id唯一的）。因此，尝试使用类选择器，然后在其上调用.Datepicker()。

$（document）.ready（）函数内的代码不适用于AJAX回调

3 个答案:

修改