使用jQuery以編程方式在Javascript for IE中觸發事件

Question

當IE中的用戶觸發事件時，它將設置為window.event對象。 查看觸發事件的唯一方法是訪問window.event對象（據我所知）

如果以編程方式觸發事件（例如通過jQuery觸發事件），則會導致ASP.NET驗證程序出現問題。 在這種情況下， window.event對象存儲最后一個用戶觸發的事件。

當onchange事件以編程方式觸發連接有ASP.NET驗證器的文本框時，驗證會中斷，因為它正在查看觸發最后一個事件的元素，而該事件不是驗證器的元素。

有沒有人知道這方面的方法？ 這似乎是一個可以解決的問題，但從在線看，大多數人只是想方設法忽略問題而不是解決問題。

---

要解釋我正在做的具體事情：
我在文本框上使用了一個jQuery時間選擇器插件，該插件還有2個與之關聯的ASP.NET驗證器。 當時間改變時，我正在使用更新面板回發到服務器以動態地執行某些操作，因此我需要觸發onchange事件以觸發該文本框的回發。

jQuery時間選擇器通過創建隱藏的無序列表來操作，該列表在單擊文本框時可見。 單擊其中一個列表項時，將通過jQuery的change()方法以編程方式為文本框觸發“change”事件。

因為事件的觸發器是一個列表項，IE將列表項視為事件的來源，而不是文本框，就像它應該的那樣。

一旦文本框改變，我就不太關心這個ASP.NET驗證器工作了，我只需要處理“ change ”事件，這樣就可以為文本框調用我的回發事件。 問題是驗證器在IE中拋出一個異常，阻止任何事件被觸發。

Firefox（我假設其他瀏覽器）沒有這個問題。 由於事件模型不同，只有IE。 有沒有人遇到過這個並看過如何修復它？

---

我發現這個問題報告了其他幾個地方，但他們沒有提供解決方案：

• jQuery的論壇，帶有jQuery UI Datepicker和ASP.NET Validator
• ASP.NET論壇，ValidatorOnChange（）函數的bug

Answer 1

我有同樣的問題。 通過使用此功能解決：

jQuery.fn.extend({
    fire: function(evttype){ 
        el = this.get(0);
        if (document.createEvent) {
            var evt = document.createEvent('HTMLEvents'); 
            evt.initEvent(evttype, false, false); 
            el.dispatchEvent(evt); 
        } else if (document.createEventObject) { 
            el.fireEvent('on' + evttype); 
        }
        return this;
    }
});

所以我對datepicker的“onSelect”事件處理程序如下所示：

if ($.browser.msie) {
    datepickerOptions = $.extend(datepickerOptions, { 
        onSelect: function(){
            $(this).fire("change").blur();
        }
    });
}

Answer 2

我用補丁解決了這個問題：

    window.ValidatorHookupEvent = function(control, eventType, body) {
        $(control).bind(eventType.slice(2), new Function("event", body));
    };

更新：我已將問題提交給MS（ 鏈接 ）。

Answer 3

根據您的描述，這個問題很可能是IE用於JS的獨特事件冒泡模型的結果。

我唯一真正的答案是拋棄ASP.NET驗證器並使用jQuery表單驗證插件。 然后您的文本框可以只是一個常規的ASP Webforms控件，當內容更改和回發發生時，一切都很好。 此外，您還會從服務器代碼中分離出更多客戶端問題。

我從來沒有太多運氣將Webform Client控件（如Form Validation控件）與外部JS庫（如jQuery）混合在一起。 我發現更好的路線只是與其中一種相關，但不是混合搭配。

不是你可能正在尋找的答案。

如果你想使用jQuery表單驗證插件concider這一個jQuery表單驗證

Answer 4

在使用javascript啟動事件之前，請考慮設置隱藏字段_EVENTTARGET值。 您需要將其設置為服務器端ID（用客戶端ID中的$替換下划線），以便服務器了解它。 我在我模擬的按鈕點擊上執行此操作，以便服務器端可以確定在結果發回時觸發哪個OnClick方法 - Ajax與否，並不重要。

Answer 5

這是jQuery datepickers和ASP驗證控件的地方性問題。 正如您所說，錯誤的元素交叉觸發ASP NET javascript驗證例程，然后M $代碼拋出錯誤，因為例程中的觸發元素未定義。

我通過決定M $應該更強大地編寫代碼並因此重新聲明一些M $驗證器代碼來處理未定義的元素，這與我所看到的任何其他人不同。 我所看到的其他所有內容基本上都是jQuery方面的解決方法，並且可以削減可能的功能（例如，使用click事件而不是更改）。

失敗的是

   for (i = 0; i < vals.length; i++) {
        ValidatorValidate(vals[i], null, event);
    }

當它試圖獲取未定義的'vals'的長度時會拋出錯誤。

我剛才補充道

if (vals) {
    for (i = 0; i < vals.length; i++) {
        ValidatorValidate(vals[i], null, event);
    }
}

她很高興。 重新聲明整個違規功能的最終代碼如下。 我把它作為腳本包含在我的母版頁或頁面的底部。

是的，如果M $決定在將來更改其驗證器代碼，這確實會破壞向上兼容性。 但人們希望他們能解決它，然后我們可以完全擺脫這個補丁。

//  Fix issue with datepicker and ASPNET validators: redeclare MS validator code with fix
 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;
    if (vals) {
        for (i = 0; i < vals.length; i++) {
            ValidatorValidate(vals[i], null, event);
        }
    }
    ValidatorUpdateIsValid();
}

Answer 6

這就是我解決一個類似問題的方法。 為datepicker寫了一個onSelect（）處理程序。 鏈接文本在該函數中，稱為__doPostBack（'textboxcontrolid'，''）。 這觸發了文本框到服務器的部分回發，服務器依次調用驗證器。