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

Code inside $(document).ready() function does not work for AJAX callback

本文关键字：不适用 适用于 AJAX 代码 回调 document ready 函数      更新时间：2023-09-26

我有这样的日期选择器的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);
        }
    })
})

它不起作用，因为您的文档已经完成。之后加载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'
    });
});

在动态附加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为date的元素调用.Datepicker()，这表明只能有一个元素具有该id（因为HTML dom应该具有唯一的id）。所以试着使用一个类选择器，然后调用它的.Datepicker()。

试试这个代码：

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