jQuery UI datepicker導致屏幕在選擇日期後滾動到頂部

我在jQuery對話框中有幾個jQuery日期選擇器。每當用戶從日期選擇器中選擇日期時，屏幕將滾動到頂部。這隻發生在IE8而不是Firefox 3.6或Chrome 5中。由於大多數用戶會使用IE，這將會非常煩人。任何人都可以給我一個線索，爲什麼會發生這種情況？jQuery UI datepicker導致屏幕在選擇日期後滾動到頂部

下面是HTML的對話框中的一個片段：

<div id="AppointmentDialog" style="display: none; font-size: 12px;"> 
    <table> 
     <tr class="lesson notAvailable allDay"> 
      <td> 
       Start 
      </td> 
      <td> 
       <input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" /> 
       <input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" /> 
       <input id="hidStartTime" type="hidden" value="" /> 
      </td> 
     </tr> 
     <tr class="notAvailable allDay"> 
      <td> 
       End 
      </td> 
      <td> 
       <input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" /> 
       <input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" /> 
       <input id="hidEndTime" type="hidden" value="" /> 
      </td> 
     </tr> 
    </table> 
</div>

JavaScript代碼來初始化對話框並datepickers：

$(document).ready(function() { 
    initDialogs(); 
}); 

function initDialogs() { 
    // Configure the New Appointment dialog 
    $("#AppointmentDialog").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width: 320, 
     modal: true, 
     title: 'Appointment', 
     buttons: { 
      "Close": function() { $(this).dialog("close"); }, 
      "Save": function() { 
       // Function call 
      } 
     } 
    }); 

    $.mask.definitions['h'] = '[012]'; 
    $.mask.definitions['m'] = '[]'; 
    $("#txtStartTime").mask("h9:m9"); 
    $("#txtEndTime").mask("h9:m9"); 

    // Init date pickers 
    $("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' }); 
    $("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' }); 
};

編輯

我使用jQuery 1.4 .2和UI 1.8.2

來源

2010-08-10 Phil Hale

我已經仔細研究過它。該錯誤已被reported with a workaround。

我使用jQuery UI的縮小版本，所以代碼如下所示：

(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>" 

(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"

來源

2010-09-23 09:36:47

感謝這個！你爲我節省了很多時間！ – 2011-04-28 20:14:24

我有這個確切的問題，但真正的問題竟然是在頁面上重複的ID。一旦我刪除重複的ID，問題就完全消失了。

來源

2011-01-12 20:53:45 manu08

你需要重寫「$」佔位符「jQuery的」如果文本含有「＃」

來源

2017-02-07 18:09:07

歡迎來到SO。這應該是一個評論，而不是回答。 – 2017-02-07 18:32:46

我是不允許觸摸的JS庫，我說下onSelect處理這一行。

$('#ui-datepicker-div table td a').attr('href', 'javascript:;');

所以我的代碼看起來像

  $('#txtDate').datepicker({ 
        // other properties 
        onSelect: function (selectedDate) { 
         $('#ui-datepicker-div table td a').attr('href', 'javascript:;'); 
         // other code 
        } 
       });

來源

2018-02-28 10:15:10 Imad

jQuery UI datepicker導致屏幕在選擇日期後滾動到頂部

回答

相關問題