當從ajax加載html時獲取jQuery datepicker live

我在所有表單上定義了以下jQuery腳本。當從ajax加載html時獲取jQuery datepicker live

$("input:text.datepicker").datepicker({ 
    yearRange: "1900:+0", 
    changeMonth: true, 
    changeYear: true 
});

基本上這會調用任何類型爲text的類型爲「datepicker」的輸入元素的日期選擇器。

這適用於所有頁面，除了我在下面描述的一種情況。

我必須通過ajax加載一個表單，然後顯示在jQueryUI對話框中。在這個對話框中，我只能讓日期選擇器顯示if我再次包含java腳本代碼。顯然，我不想將代碼包含兩次。有沒有辦法讓新加載的文本框以某種方式顯示日期選擇器？

謝謝

來源

2012-05-06 Michael Frey

一種選擇是在use on method不贊成live方式click event初始化日期選擇器：

$('body').on('click', 'input.datepicker', function(event) { 
    $(this).datepicker({ 
     showOn: 'focus', 
     yearRange: '1900:+0', 
     changeMonth: true, 
     changeYear: true 
    }).focus(); 
});

此代碼應放置在$(document).ready部分。

請注意showOn: 'focus'選項並在初始化後觸發focus event。

DEMO：http://jsfiddle.net/Mq93s/

來源

2012-05-06 09:53:27 VisioN

（1）您只需要調用'.datepicker（）'每一次輸入，日期選擇器足夠聰明，不會雙重綁定，所以這不是什麼大問題。（2）如果使用'buttonImage'選項，這將無法正常工作。 –

@ muistooshort這是我的回答評論？ :) – VisioN

是的，只是指出了點擊綁定方法的一些注意事項。 –

那麼這裏的問題是執行的日期選擇器代碼時，你的表單元素還不存在，因此，它不能將其轉換爲一個datepicker。你可以繞過這個問題有兩種方法：

的日期選擇器代碼移動到一個單獨的函數，然後你會從document.ready事件中的所有頁面手動調用。這樣它只會被聲明一次，並且您也可以在您的ajax頁面中調用它，只有在您完成ajax調用而不是ready事件時您纔會調用它。
既然你知道你在窗體中加載了什麼，你可以將給定的輸入轉換爲日期選擇器。這不是一個乾淨的解決方案，因爲如果您想在日期選擇器中更改某些內容，至少需要修改兩個位置。

這兩種方法都是有效的，選擇是你的，你也知道哪個版本適合您的項目更好:)

來源

2012-05-06 10:12:40

嗨，謝謝你的想法。我已經試過選項1，通過加載html後調用該函數，它完美的工作。之前我曾嘗試過這種方法，但是在顯示對話框之前我調用了該函數，但這不起作用。現在我在顯示對話框後調用它，它可以工作。 –

當從ajax加載html時獲取jQuery datepicker live

回答

相關問題