Jquery datepicker 彈出視窗未在 IE8 中的選擇日期關閉

我有一個帶有開始日期欄位的網路表單。我已經將 jquery datepicker 綁定到 txt 欄位。現在，當我在 FF 中選擇一個日期時，所選日期會填充在文本框中，並且日曆彈出視窗會關閉。但是，當我在 IE8 中執行相同操作時，所選日期會填充在文本框中，但彈出視窗仍然打開。我還注意到，只要我在彈出日曆中選擇一個日期，就會生成一個腳本錯誤。

我正在使用 jquery 1.3.2、jquery-ui 1.7.2 和 .NET 3.5。這是我的程式碼範例：

<script type="text/javascript">
 $(document).ready(function() {
   $("#<%=txtStartDate.ClientID%>").datepicker({
     changeMonth: true,
     changeYear: true,
     showButtonPanel: true,
     showOn: 'button',
     buttonImage: '/_layouts/images/CALENDAR.GIF',
     buttonImageOnly: true
   });
 });
</script>
<div id="stylized">
 <asp:ValidationSummary ID="vs" runat="server" CssClass="messages-error" HeaderText=" Action required before the form can be submitted." ForeColor="" ValidationGroup="sh" />
 <div class="formrow">
   <div class="ms-formlabel formlabel">
     <asp:Label ID="lblStartDate" runat="server" CssClass="ms-standardheader" AssociatedControlID="txtStartDate">Start Date:</asp:Label>
   </div>
   <div class="ms-formbody formfield">
     <asp:RequiredFieldValidator ID="reqStartDate" runat="server" ControlToValidate="txtStartDate" ErrorMessage="Start Date is a required field." Text="*" Display="Dynamic" ValidationGroup="sh"></asp:RequiredFieldValidator>
     <asp:CompareValidator ID="cvStartDate" runat="server" ControlToValidate="txtStartDate" ErrorMessage="Date must be in the format MM/DD/YYYY" Text="*" Display="Dynamic" ValidationGroup="sh" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
     <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
     <span class="formMessage">ex. MM/DD/YYYY</span>
   </div>
 </div>
 <div id="buttonrow">
   <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="ms-ButtonHeightWidth" OnClick="Submit_Click" ValidationGroup="sh" />
   <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="ms-ButtonHeightWidth" OnClick="Cancel_Click" CausesValidation="false" />
 </div>
</div>

這是我在選擇日期時在 IE 中遇到的腳本錯誤：

’length’ 為 null 或不是對象

WebResource.axd

這是引發錯誤的程式碼：

function ValidatorOnChange(event) {
 if (!event) {
   event = window.event;
 }
 Page_InvalidControlToBeFocused = null;
 var targetedControl;
 if ((typeof(event.srcElement) != "undefined") && (event.srcElement != null)) {
   targetedControl = event.srcElement;
 }
 else {
   targetedControl = event.target;
 }
 var vals;
 if (typeof(targetedControl.Validators) != "undefined") {
   vals = targetedControl.Validators;
 }
 else {
   if (targetedControl.tagName.toLowerCase() == "label") {
       targetedControl = document.getElementById(targetedControl.htmlFor);
       vals = targetedControl.Validators;
   }
 }
 var i;
 for (i = 0; i < vals.length; i++) {
   ValidatorValidate(vals[i], null, event);
 }
 ValidatorUpdateIsValid();
}

它發生在最後 for 循環中的 .length 上。Vals 為空，在前面的 if/else 中找不到。我已經通過了 javascript 並且 if (typeof(targetedControl.Validators) != “undefined”) 返回 false 然後 if (targetedControl.tagName.toLowerCase() == “label”) 返回 false 。因此長度為空或不是對象錯誤。

現在我不確定在 IE 中沒有關閉 datepicker 彈出視窗和 WebResources.axd 文件中的腳本錯誤是否是相關錯誤，但我傾向於這種方式。誰能告訴我為什麼彈出視窗沒有關閉？

這似乎是一個錯誤，但在 datepicker 聲明中添加這一行應該可以解決它：

onSelect: function() {}

選擇日期後，日期選擇器會觸發INPUT元素上的更改事件，但 ASP.Net 驗證器會選擇 click 事件，源是A元素，並嘗試在該A元素上查找驗證器，而不是INPUT. 這可以通過檢查驗證器的函式event.srcElement內部來觀察。ValidatorOnChange在 IE 以外的瀏覽器中， event.type 是 ‘change’ 而 event.target 是正確的INPUT.

雖然 no-op 函式onSelect: function() { }可以防止錯誤，但通過覆蓋.change()datepicker 的 default 的內置函式onSelect，它還可以防止驗證器觸發。這是兩者的解決方法：

onSelect: function() {
 this.fireEvent && this.fireEvent('onchange') || $(this).change();
}

這使用普通.change()觸發器，除了在 IE 上，它需要用於.fireEvent獲取要與更改關聯的事件對象，而不是點擊。

引用自：https://stackoverflow.com/questions/1704398