Datepicker初始化頁面加載後添加的類字段

我有字段可以在頁面加載後添加多個額外的字段（想想工作履歷中的教育&工作經驗字段）。我正在使用this。Datepicker初始化頁面加載後添加的類字段

我可以在第一個字段添加日期選擇器，但後續添加的字段不會訪問日期選擇器，儘管是克隆/重要的原始副本。我猜測日期選擇器只在頁面加載時或僅在頁面上的一個類中初始化。

所以在頁面上我初始化日期選擇器：

$('.input-append.date').datepicker();

對於此類封裝形式代碼塊。確定初始頁面加載;如果出現錯誤並且頁面重新加載先前輸入的多個字段（對於返回任何錯誤的所有字段都有日期選擇器），也可以。但是，使用另一個向表單添加新字段的js函數，其他新字段無法訪問datepicker。我現在不知道該怎麼做，也許有更多經驗/智慧的人可以給我一個提示。

編輯：

很簡單：我只是說：

$('.input-append.date').datepicker();

的代碼調用新的領域。至於我不知道的最佳解決方案，任何專門研究js的人都可以對此發表評論，並且在我擴展我的搜索詞時，我發現了許多其他類似的問題。然而，對我來說，我現在正在做的事情已經夠好了。

來源

2013-01-24 blueblank

您需要在每個動態添加的元素附加到DOM後初始化datepicker。例如。 'myElem.appendChild（newTexInputElem）; $（newTextInputElem）。datepicker（）' – marekful

這是我在初步診斷後猜到的，但並不完全確定如何去做。 – blueblank

試試我上面寫的。我想隨後添加的字段通過'appendChild'（或jQuery'append'）附加到DOM。追加後，你必須在剛添加的元素上調用'datepicker（）'。你可以調用你原來的'$（'。input-append.date'）。datepicker（）;'但是這會嘗試初始化已經初始化的datepickers。所以最好在附加的元素上分別調用'datepicker'。 – marekful

對於正在添加的元素，使用data-provide =「datepicker」屬性。它將被懶惰地初始化。例如，如果輸入字段出現在ajax響應中並加載到容器div中。因此，在這種情況下：

<input type="text" data-provide="datepicker" />

故當您將在cotainer DIV加載這個Ajax響應它像

$('#container-div').html(ajax_response);

這會工作。

如果您正在創建通過jQuery的元素，並將它附加一些容器（我想這是你的情況發生），比如你有一個創建文本框的功能，並追加一些容器以同樣的方式div和這個函數被稱爲某個元素的點擊事件讓我們說它的按鈕。數據提供屬性也是解決這個問題的方法。例如

function createTextBox(){ 
    var t = $('<input>').attr('data-provide','datepicker'); 
    $('#container-div').append(t); 
}

而這個函數被調用的一些按鈕的單擊事件像這樣：

$(document).ready(function(){ 
     $('#someBtn).click(createTextBox); 
});

總之是動態元素是否在Ajax響應來作爲一個字符串或正在創建通過jquery，只需使用data-provide屬性來設置bootstrap datepicker。因爲在這種情況下，日期選擇器以Bootstrap方式懶惰地初始化。

來源

2014-09-12 14:01:04

Datepicker初始化頁面加載後添加的類字段

回答

相關問題