jQuery events not being called when triggering 'change' event via fireEvent
Problem appears on IE7-8. Here is simple demonstration:
<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!');
});
开发者_Python百科 });
</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>
If you'll click first link only one alert will be shown, any ideas why?
try this :
<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>
加载中,请稍侯......
精彩评论