日期選擇器和動態表中未使用jQuery功能

我看了這裏的許多線程我的問題，但我還沒有找到一個解決辦法，可能是因爲我不是JQuery的王...日期選擇器和動態表中未使用jQuery功能

這是很簡單的例子：

當我嘗試添加一個新行，日期選擇器不能正常工作。我不知道該怎麼辦。我使用這個函數在我的表中添加一個新行。（在現實中，我有一個HTML頁面與許多表，爲他們每個人我使用日期選擇器）

var champ_date_arrivee = document.createElement('input'); 
champ_date_arrivee.setAttribute('type','text'); 
champ_date_arrivee.setAttribute('size','10'); 
champ_date_arrivee.setAttribute('name','date_t'); 
champ_date_arrivee.setAttribute('value',''); 
champ_date_arrivee.setAttribute('id','date_t'); 
champ_date_arrivee.className='champ_date_input_tableau'; 
newCell1.appendChild(champ_date_arrivee);

與此代碼爲日期選擇：

$(document).ready(function(){ 

$.datepicker.setDefaults($.datepicker.regional['fr']); 
$('.champ_date_input_tableau').datepicker({ /* action sur class date */ 

    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "c-70:c+70", 
    clickInput:true, 
}); 

});

正如你所看到的，我用的是類名稱champ_date_input_tableau，因爲我不知道如何以其他方式來完成。

我已經試過這樣：

var champ_date_arrivee = document.createElement('input'); 
champ_date_arrivee.setAttribute('type','text'); 
champ_date_arrivee.setAttribute('size','10'); 
champ_date_arrivee.setAttribute('name','date_t'); 
champ_date_arrivee.setAttribute('value',''); 
champ_date_arrivee.setAttribute('id','date_t'); 
champ_date_arrivee.className='champ_date_input_tableau'; 
    $(champ_date_arrivee).datepicker({ 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "c-70:c+70", 
}); 
newCell1.appendChild(champ_date_arrivee);

你有這個鏈接this try 它不工作的結果。

我知道我必須使用這樣的代碼，但是如何？

jQuery('.date-pick').removeClass('hasDatepicker').datepicker({ 
dateFormat: 'mm-dd-yy' 
});

你是我最後的機會......

對不起，我的英語，我是法國人。

謝謝你的幫助。

來源

2012-07-27 Tavarlindar

確定你需要使用jQuery的live()方法，以便

$('.champ_date_input_tableau').live('focusin', function() { 
    $(this).datepicker(); 
});

現在繼續加入更多的元素，live將結合這新的元素了。

編輯：

據說live已被棄用，但也有一些是工作原理類似於我相信所謂的on。所以請繼續使用，如果你真的對使用最新版本一直很認真

來源

2012-07-28 21:39:51 Tarik

查看我的回答。不再是使用live的好主意。它已被棄用。 – JasCav 2012-07-28 21:43:13

謝謝你的回答。 – Tavarlindar 2012-08-01 17:05:48

你的代碼不工作的原因是，當你的頁面加載時，日期選擇器只能連接到已有的表單項目，但不會應用於新項目。添加新行時，需要確保在剛添加的特定項目上調用.datepicker（）函數。

Per Dorian的回答你可以動態地做到這一點，但是，DO NOT USE LIVE。（請閱讀文章中有關它的各種問題的解釋，從jQuery 1.7開始已被棄用）。相反，您需要查看on（）函數。像這樣的東西應該工作：

$('#BlocFormulaire').on('click', '.champ_date_input_tableau', function() { 
    $(this).datepicker(); 
});

來源

2012-07-28 21:40:05 JasCav

你可以修改我的答案，而不是僅僅將'live'改爲'on'。 – Tarik 2012-07-28 21:48:33

@DorianGray - 雖然我不確定是否最好在這種情況下使用動態事件，因爲我不熟悉每一次附加日期選擇器的含義（因爲它現在作爲事件附加）。我仍然更喜歡我的第一個答案（我在答案之前發佈的 - 我只更新瞭解決您的特定響應），因爲他應該確保將日期選擇器連接爲動態添加新行的一部分。 – JasCav 2012-07-28 22:05:24

謝謝你的回答，你讓我活着！ – Tavarlindar 2012-08-01 17:05:25

你並不真的需要.on()，.delegate()或.live()。Datepicker非常聰明，只要將它添加到ajoutLigneAuTableauTransfert()函數的底部即可。由於您在應用日期選擇器後正在修改ID屬性，因此它會搞亂。在執行後特別呼叫日期選擇器插件majNumLignesTabTransfert('ajout');

（1）刪除ajoutLigneAuTableauTransfert()中的兩個雙擊呼叫。（2）我也注意到你在最後的配置選項的末尾添加了逗號，這將在IE中失敗，並且技術上是javascript中的語法錯誤。（3）在majNumLignesTabTransfert('ajout');

之後添加日期選擇器調用下面是我描述的變化顯示它的工作。在javascript中爲指標尋找// ANT-MOD。

http://jsfiddle.net/dfDNu/

來源

2012-07-28 22:09:12

非常感謝你的回答。你花時間，像Dorian Gray和JasCav一樣幫助我。你的答案和你的質量答案是完美的。你非常幫助我。當我看到解決方案時，事實上非常簡單。但是如果沒有你，我仍然會度過一個糟糕的夜晚。非常感謝你。 – Tavarlindar 2012-08-01 17:13:04

日期選擇器和動態表中未使用jQuery功能

回答

相關問題