將 datepicker() 放在動態創建的元素上 - JQuery/JQueryUI

Question

我已經動態創建了文本框，我希望每個文本框都能夠在點擊時顯示日歷。 我正在使用的代碼是：

$(".datepicker_recurring_start" ).datepicker();

這只適用於第一個文本框，即使我所有的文本框都有一個名為 datepicker_recurring_start 的類。

非常感謝您的幫助！

Answer 1

這是訣竅：

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

演示

$('...selector..').on('..event..', '...another-selector...', ...callback...); 語法意思是：
為事件..event.. （在我們的示例中為“focus”）向...selector.. （我們示例中的body ）添加一個偵聽...selector.. 。 對於匹配選擇器...another-selector... （在我們的示例中為.datepicker_recurring_start ）的匹配節點的所有后代，應用事件處理程序...callback... （在我們的示例中為內聯函數）

請參閱http://api.jquery.com/on/ ，尤其是有關“委托事件”的部分

Answer 2

對我來說，下面的 jquery 有效：

將“正文”更改為文檔

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

感謝skafandri

注意：確保每個字段的 id 都不同

Answer 3

skafandri +1 的出色回答

這只是更新以檢查 hasDatepicker 類。

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Answer 4

確保帶有.date-picker hasDatepicker類的元素還沒有hasDatepicker類。 如果是這樣，甚至嘗試使用$myDatepicker.datepicker();重新初始化$myDatepicker.datepicker(); 將失敗！ 相反，你需要做...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Answer 5

你需要運行.datepicker(); 在您動態創建其他文本框元素后再次。

我建議在將元素添加到 DOM 的調用的回調方法中這樣做。

因此，假設您正在使用 JQuery Load 方法從源中提取元素並將它們加載到 DOM 中，您將執行以下操作：

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

Answer 6

動態元素的新方法是MutationsObserver .. 以下示例使用underscore.js來使用 ( _.each ) 函數。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

Answer 7

這對我有用（使用 jquery datepicker）：

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

Answer 8

其他解決方案都不適合我。 在我的應用程序中，我使用 jquery 將日期范圍元素添加到文檔中，然后將 datepicker 應用於它們。 因此，由於某種原因，沒有一個事件解決方案有效。

這是最終奏效的：

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

希望這對某人有所幫助，因為這讓我有點退縮。

Answer 9

您可以在 javascript 函數中添加類 .datepicker，以便能夠動態更改輸入類型

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Answer 10

我已經修改@skafandri答案，以避免重新申請的datepicker的構造與所有輸入.datepicker_recurring_start類。

這是 HTML：

<div id="content"></div>
<button id="cmd">add a datepicker</button>

這是JS：

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

這是一個工作演示

Answer 11

這是在 JQuery 1.3 上對我有用的方法，並且在第一次單擊/焦點時顯示

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

這需要您的輸入具有“mostrar_calendario”類

Live 適用於 JQuery 1.3+ 的較新版本，您需要將其調整為“on”

在此處查看有關差異的更多信息http://api.jquery.com/live/

Answer 12

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});

Answer 13

 $('body').on('focus',".my_date_picker", function(){
            $(this).datepicker({
                minDate: new Date(),
            });
        });