當通過fireEvent觸發「更改」事件時，jQuery事件未被調用

問題出現在IE7-8上。下面是簡單的例子：當通過fireEvent觸發「更改」事件時，jQuery事件未被調用

<html> 
    <head> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     // Selenium's trigger from scripts/htmlutils.js 
     function triggerEvent(element, eventType, canBubble, controlKeyDown, 
          altKeyDown, shiftKeyDown, metaKeyDown) 
     { 
     canBubble = (typeof(canBubble) == undefined) ? true : canBubble; 
     if (element.fireEvent && element.ownerDocument && 
      element.ownerDocument.createEventObject) { // IE 
      var evt = createEventObject(element, controlKeyDown, altKeyDown, 
             shiftKeyDown, metaKeyDown);  
      element.fireEvent('on' + eventType, evt); 
     } 
     else { 
      var evt = document.createEvent('HTMLEvents'); 

      try { 
      evt.shiftKey = shiftKeyDown; 
      evt.metaKey = metaKeyDown; 
      evt.altKey = altKeyDown; 
      evt.ctrlKey = controlKeyDown; 
      } catch (e) { 
      // On Firefox 1.0, you can only set these during initMouseEvent 
      // or initKeyEvent we'll have to ignore them here 
      LOG.exception(e); 
      } 

      evt.initEvent(eventType, canBubble, true); 
      element.dispatchEvent(evt); 
     } 
     } 

     function createEventObject(element, controlKeyDown, altKeyDown, 
           shiftKeyDown, metaKeyDown) 
     { 
     var evt = element.ownerDocument.createEventObject(); 
     evt.shiftKey = shiftKeyDown; 
     evt.metaKey = metaKeyDown; 
     evt.altKey = altKeyDown; 
     evt.ctrlKey = controlKeyDown; 
     return evt; 
     } 

     function triggerBySelenium() { 
     var elem = document.getElementById('sel1'); 
     triggerEvent(elem, 'change'); 
     } 

     function triggerByJQuery() { 
     $('#sel1').trigger('change'); 
     } 

     $(function() { 
     $('#sel1').bind('change', function() { 
      alert('jQuery\'s handler!'); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <select id="sel1" onchange="alert('Native handler!');"> 
     <option value="1">text 1</option> 
     <option value="2">text 2</option> 
    </select> 
    <br/> 
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/> 
    <a href="#" onclick="triggerByJQuery();">Fire event by jQuery</a> 
    </body> 
</html>

如果你點擊第一個鏈接只有一個警報將被顯示，任何想法，爲什麼？

來源

2010-09-18 Vadim P.

我就離開這個位置：降級到1.3.2，它會工作。這有點複雜，爲什麼它在1.4.x中無法正常工作，但簡而言之：爲了「修復」IE的更改事件行爲，jQuery實際上不再綁定到IE中的「更改」。 – 2010-09-19 14:22:58

試試這個：

<html> 
    <head> 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     // Selenium's trigger from scripts/htmlutils.js 
     function triggerEvent(element, eventType, canBubble, controlKeyDown, 
          altKeyDown, shiftKeyDown, metaKeyDown) 
     { 
     canBubble = (typeof(canBubble) == undefined) ? true : canBubble; 
     if (element.fireEvent && element.ownerDocument && 
      element.ownerDocument.createEventObject) { // IE 
      var evt = createEventObject(element, controlKeyDown, altKeyDown, 
             shiftKeyDown, metaKeyDown);  
      element.fireEvent('on' + eventType, evt); 
     } 
     else { 
      var evt = document.createEvent('HTMLEvents'); 

      try { 
      evt.shiftKey = shiftKeyDown; 
      evt.metaKey = metaKeyDown; 
      evt.altKey = altKeyDown; 
      evt.ctrlKey = controlKeyDown; 
      } catch (e) { 
      // On Firefox 1.0, you can only set these during initMouseEvent 
      // or initKeyEvent we'll have to ignore them here 
      LOG.exception(e); 
      } 

      evt.initEvent(eventType, canBubble, true); 
      element.dispatchEvent(evt); 
     } 
     } 

     function createEventObject(element, controlKeyDown, altKeyDown, 
           shiftKeyDown, metaKeyDown) 
     { 
     var evt = element.ownerDocument.createEventObject(); 
     evt.shiftKey = shiftKeyDown; 
     evt.metaKey = metaKeyDown; 
     evt.altKey = altKeyDown; 
     evt.ctrlKey = controlKeyDown; 
     return evt; 
     } 

     function triggerBySelenium() { 
     $('#sel1').trigger('change'); 
     } 

     function triggerByJQuery() { 
     $('#sel1').trigger('change'); 
     } 

     $(function() { 
     $('#sel1').bind('change', function() { 
      alert('jQuery\'s handler!'); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <select id="sel1" onchange="alert('Native handler!');"> 
     <option value="1">text 1</option> 
     <option value="2">text 2</option> 
    </select> 
    <br/> 
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/> 
    <a href="#" onclick="triggerBy();">Fire event by jQuery</a> 
    </body> 
</html>

來源

2010-09-18 13:57:07 AlexC

你是認真的嗎？ – 2010-09-18 17:48:30

:)亞歷克斯，我需要使用本機IE功能來調用jquery綁定的事件。我需要修復硒的triggerEvent函數，或者如果它不是IE錯誤，我們會打開John的門票。 -1 – 2010-09-18 20:43:52

當通過fireEvent觸發「更改」事件時，jQuery事件未被調用

回答

相關問題