IE8&IE7 onchange 事件只有在重复选择后才会触发

我有一组带有 onchange 处理程序的收音机:

问题是在 IE8 &IE7,只有反复选择才会触发onchange事件.

请在 IE 的开发者工具 [浏览器模式] IE8 中查看此演示:http://jsfiddle.net/3zwur/2/

解决方案

这是由于 IE7 和 IE8 的更改事件的错误.您应该改为听 click 事件.

如这张关于怪癖模式的表格所示,radio上的change事件按钮和复选框在 IE7 和 IE8 中相当有问题.

你可以像这样监听点击事件:

你的小提琴的一个分支:http://jsfiddle.net/T7VYL/

通常使用 javascript 库,例如 JQuery 和 YUI 让你的生活更轻松,尽管根据我的测试,他们没有修复旧版本 IE 中的这个错误.

如果您仍想收听更改事件,可以部署此修复程序:http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/.基本上它会监听 click 事件,然后让元素触发 change 事件.

正如提问者的小提琴所示:http://jsfiddle.net/3zwur/3p>

I have a group of radio with an onchange handler:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onchange="nextPnl('Q12');">
<br/>
<input type="radio" name="Q12" value="radio" id="Q12_1"  onchange="nextPnl('Q12');">
         ​

function nextPnl(did)
{
document.write(did);

}​

The problem is that in IE8 & IE7, the onchange event is triggered only after repeated selection.

Please view this demo in IE's Developer Tools [Browser Mode] IE8: http://jsfiddle.net/3zwur/2/

解决方案

This is due to a bug with IE7 and IE8's change events. You should instead listen to the click event.

As shown in this table on quirks mode, the change event on radio buttons and checkboxes is quite buggy in IE7 and IE8.

You can listen to the click event like so:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onclick="nextPnl('Q12');">
<br>
<input type="radio" name="Q12" value="radio" id="Q12_1"   onclick="nextPnl('Q12');">

And a fork of your fiddle: http://jsfiddle.net/T7VYL/

Usually, using a javascript library such as JQuery and YUI make your life easier, although from my testing, they do not fix this bug in older versions of IE.

If you would still like to listen to the change event, you can deploy this fix: http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/. Basically it listens for the click event, and then causes the element to fire a change event.

As demonstrated by the asker's fiddle: http://jsfiddle.net/3zwur/3

相关文章