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

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

javascript jquery ajax

Javascript $（document）.ready（）函数中的代码不适用于AJAX回调,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有如下日期选择器的Javascript代码： $(document).ready(function(){ $("#date").Datepicker({ Field: '#date', Format: "YYYY/MM/DD", date: true, format: 'YYYY/MM/DD' }); }); $(document).ajaxComplete(function(){ $("#date").

我有如下日期选择器的Javascript代码：

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

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

日期元素工作正常。但是当我编辑我的文章时，我用AJAX创建日期元素。当我再次单击date元素时，datepicker不工作，也不会向我显示任何错误

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()

请参阅完整的文档：

顺便说一句，我从来没有用过它，我只是发现了它

编辑应该是这样的:

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

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

它不起作用，因为您的文档已经完成。之后将加载AJAX

你可以用

$( document ).ajaxComplete()

请参阅完整的文档：

顺便说一句，我从来没有用过它，我只是发现了它

编辑应该是这样的:

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

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

请尝试以下代码：

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

请尝试以下代码：

$('body').on('focus',"#date", function(){
    $(this).datepicker({
      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为

id

的元素（因为HTML dom应该具有

id

唯一性）。因此，请尝试使用类选择器，然后在此基础上调用

.Datepicker（）

。

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

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