jQuery日期選擇器沒有在ajax生成的輸入字段上工作

Question

我有一個輸入字段，它是從服務器端通過Ajax生成的，並插入到當前頁面中。 我的問題是：jQuery日期選擇器在通過Ajax生成時不在輸入字段上工作，但是當字段直接放在頁面中時它可以工作。

下面，我包含了我的代碼的縮小版本。

HTML代碼：

<form id="user-form"></form>

這里是應該激活日期選擇器的jQuery代碼。

$.ajax({
    type: "GET",
    url: "/inputfield-loader.php" ,
    success: function(data) {
        $('#user-form').html(data);
        $("#datefield").datepicker();
    } 
});

這是inputfield-loader.php

<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>

正如我已經說過的，如果輸入字段剛剛硬編碼到頁面中，這種方法很有效。 但是當作為Ajax調用的返回字符串插入DOM時，日期選擇器不再起作用。

任何人都知道如何解決這個問題？

注意我已根據@AkshayKhandelwal的評論更新了問題以包含顯示正在發生的事情的代碼

Answer 1

試試這樣吧

success: function() {
  $('#datefield').datepicker();
}

Answer 2

日期選擇器不再有效，因為您用新的替換現有的。 因此綁定不再有效，因為引用的datepicker不存在。

在將新的datepicker插入dom后，必須重新綁定日期選擇器。

Answer 3

您需要在Ajax成功中重新初始化日期選擇器，因為您將現有的替換為newone。

$.ajax({
        type: "POST",
        url: "path" ,
        success: function(data) {
            $('#content').html(data);
            $("#datefield").datepicker();
        } ,
        error: function () {
            alert('Error');
        }
    });

希望它有所幫助！

Answer 4

當你使用$.ajax ，也許你應該這樣做：

var _ajax = function(url, data, type){
    return $.ajax(url, {
        data: data
        type: type
    })
}

並使用如下：

_ajax('handler.ashx', null, 'POST').done(function(response){
    // this block of code will execute when `ajax request` is finished !
    // for you case:
    $('#datefield').datepicker();
 });