jQuery選擇器與jquery-mobile datepicker不能很好地工作

Question

在我的html中，我有兩個不同的日期選擇器，在兩個不同的divs內。我想從日期選擇器中選擇一天時做些什麼，如下所示：

$('#details1 tr .ui-body-c').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 

但是，點擊當天不會觸發點擊事件。如果我從選擇器中刪除＃details1，則會觸發事件，但會同時使用兩個日期選擇器。

這裏的日期選擇器插件的鏈接：http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

編輯：看來，表的jQuery移動日期選擇器創建頁面內沒有檢測到。我甚至試過這個：

$('html tr .ui-body-c').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 

並沒有工作。也做了var a = $('.datepicker-calendar').parent()，結果得到了[]。

有關爲什麼會發生這種情況以及如何解決它的任何想法？

Answer 1

我通過編輯jquery.ui.datepicker.mobile.js文件，爲元素添加一個自定義類來解決此問題。

if(options.altField!=undefined) 
    $(dp).attr('id', options.altField.split('#')[1] + '1'); 

然後在function updateDatepicker(){

$(".ui-datepicker-calendar td", dp).addClass("ui-body-c "+$(dp).attr('id')+'2'); 

所以，如果我的日期輸入的ID是 「myDatePicker」，在日曆上都會有類 「myDatePicker12」 每個TD，我可以這樣做：

$('.myDatePicker12').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 

Answer 2

編輯：我的歉意，我應該仔細看看datepicker的移動版本。你的問題很可能是由於它添加表到DOM後，您將需要從一些靜態的如委託事件：

$('#details1').on('click', 'tr .ui-body-c', function(){ 

---

如果日期選擇器的移動版本是一樣的正常的jQuery UI，你會過得更好使用onSelect事件，當你第一次初始化，像：

$('#details1').datepicker({ 
    onSelect: function(dateText, inst) { 
     inst.input.hide(); 
     var day=new Date(dateText); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
});​ 

當您選擇每天觸發此事件，dateText是將投入輸入值（無需要自己弄明白），inst是包含t的datepicker實例他輸入問題（inst.input）。