jQuery的日期選擇器將無法在AJAX工作添加HTML元素

我有一個jQuery綁定到「生日」輸入HTML元素日期選擇器功能，寫在頁面標題：jQuery的日期選擇器將無法在AJAX工作添加HTML元素

<script type="text/javascript"> 
    $(function() { 
     $("#birthday").datepicker(); 
    }); 
</script>

接下來，我有一些AJAX功能 - 它將新的輸入html元素添加到頁面。這個元素：

<input type="text" id="birthday" value="" class="detail-textbox1" />

單擊該生日元素不會彈出下面的文本字段的日期選擇器。我期待這一點，因爲元素是在頁面加載後添加的，因此它與標題中提供的功能沒有關係。

我該如何讓它工作？我嘗試將腳本從標題移動到正文，但似乎沒有任何效果。謝謝。

P.S.如果我在頁面主體中創建一個id =「birthday」的輸入html元素，則everythig按預期工作。似乎只有通過AJAX添加的元素功能失常。

來源

2011-01-27 Boris

您需要使用.live（），使得任何新加入的元素有附加的事件處理程序：http://api.jquery.com/live/

$('#birthday').bind('load', function() { 
    $(this).datepicker(); 
});

編輯

.live() documentation狀態，這是一個有點過時了。隨着新版本的jquery（1.7+）使用.on()。

來源

2011-01-27 04:42:43

謝謝JK。使用.live（）解決了這個問題。代替你的例子，我用$（'＃birthday'）。live（'focus'，function（）{$（this）.datepicker（）;}）; – Boris 2011-01-27 05:06:29

@Boris .datepicker（）函數創建picker，所以你只需要調用它一次。但它不會真的受到太多的傷害，我想每次都要關注它（但效率會比它低）。 – 2011-01-27 05:29:31

如果我將「焦點」更改爲「加載」，則根本不起作用。另外，我注意到，當我在datepicker中選擇並跳出（沒有選擇任何值）時，我的AJAX/php腳本都沒有工作。？！？！我究竟做錯了什麼？ – Boris 2011-02-02 14:18:54

你可以你的Ajax成功回調中初始化新添加的元素的日期選擇器：

$.ajax({ 

    ... 

    success: function(response) { 
     if(response.success) { 
       $(body).append(response.html); 
       $("#birthday").datepicker(); 
     } 
    } 
});

來源

2011-02-03 04:09:46 cweston

鮑里斯，JK：這對我來說非常有幫助的。我還發現，你可以使用AJAX HTML以下，如果你想使用日期選擇器的日期範圍選擇：

$('#groundtransporation').live('focus', function() { 
var gt = $("#rentalPickUp, #rentalDropOff").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 2, 
    onSelect: function(selectedDate) { 
    var option = this.id == "rentalPickUp" ? "minDate" : "maxDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(
     instance.settings.dateFormat || 
     $.datepicker._defaults.dateFormat, 
     selectedDate, instance.settings); 
    gt.not(this).datepicker("option", option, date); 
    } 
}); 
});

來源

2011-06-08 15:30:29 adrian

我有點遲到了，但爲了徹底 - 並與.live()功能是deprecated from jQuery 1.7起 - 我認爲我會根據自己的經驗提供更新的解決方案，以及從StackOverflow的其他答案中獲得的所有幫助！

我有一種情況，我需要將datepicker功能添加到通過AJAX調用隨機添加到DOM的輸入字段中，並且我無法修改使AJAX調用附加datepicker功能的腳本，所以我選擇了新的閃亮.on()功能及其代表團的特點：

// do this once the DOM's available... 
$(function(){ 

    // this line will add an event handler to the selected inputs, both 
    // current and future, whenever they are clicked... 
    // this is delegation at work, and you can use any containing element 
    // you like - I just used the "body" tag for convenience... 
    $("body").on("click", ".my_input_element", function(){ 

     // as an added bonus, if you are afraid of attaching the "datepicker" 
     // multiple times, you can check for the "hasDatepicker" class... 
     if (!$(this).hasClass("hasDatepicker")) 
     { 
      $(this).datepicker(); 
      $(this).datepicker("show"); 
     } 
    }); 
});

我希望這可以幫助別人，並感謝所有的答案到目前爲止，導致我這個解決方案，爲我工作！ :)

來源

2012-07-09 10:28:07

我得到了另一種情況。我的腳本正在複製包括datepicker在內的最後一個表格元素。

jquery不會工作，因爲複製的元素具有標記「hasDatepicker」。

要激活新元素中的日期選擇器，請刪除該類名並啓動它，如下所示。（「＃yournewelementid」）。attr（「class」，「your-class-name」）; $（「＃yournewelementid」）。datepicker（）;

來源

2012-07-30 09:36:54 Ahmad

當您嘗試初始化元素時，您的問題總是會發生。

當您使用$（function（）{/**一些代碼**/}）;元素必須exsit上的文件，這意味着必須對HTML，所以你可以可以創建一個函數來初始化組件或初始化它被後添加到文檔中的成功事件。

在嘗試初始化它之前，首先將ajax請求中的外部html加載添加到文檔中，否則它將不會初始化。
例子：

$阿賈克斯（{
網址：「ajax_html.html」，
數據類型：「HTML」
}）。完成（功能（HTML）{
$（「＃選擇」）。HTML（HTML）
init（）;
}）; 。

功能的init（）{
$（「生日」）日期選擇器（{}）;
}

來源

2014-09-04 19:27:06 David

jQuery的日期選擇器將無法在AJAX工作添加HTML元素

回答

相關問題