jQuery在<select>上更改事件不在IE中触发

我有一个可变数量的<select>元素的页面(这解释了为什么我在这里使用事件委托)。 当用户改变select的选项,我想隐藏/显示页面上的不同内容区域。 这是我有的代码:

 $(document).ready(function() { $('#container').change(function(e) { var changed = $(e.target); if (changed.is('select[name="mySelectName"]')) { // Test the selected option and hide/show different content areas. } }); }); 

这适用于Firefox和Safari,但在IE中,更改事件不会触发。 任何人知道为什么 谢谢!

IE中的change事件不会冒泡(请参阅这里和这里 )。 你不能同时使用事件委托。

事实上,这是因为这个IE错误,jQuery live不得不正式排除支持的事件列表中的 change (FYI的DOM规范状态change 应该泡沫 )[ 1 ]

关于你的问题,你可以直接绑定到每个select:

 $('#container select').change(/*...*/) 

如果你真的想要事件委托,你可能会发现一些成功的尝试这个人做了什么,并绑定在IE浏览器只能click ,这确实是泡沫:

 $('#container').bind($.browser.msie ? 'click' : 'change', function(event) { /* test event.type and event.target * to capture only select control changes */ }) 

但是这个浏览器检测感觉真的不对。 我真的会尝试使用前面的例子(直接绑定到下拉菜单)。 除非你有几百个<select>方块,否则事件代表团在这里不会买你太多。


[ 1 ]注意:jQuery> = 1.4现在通过live() / on()在IE中模拟冒泡change事件。

想法可能有帮助:

 $(document).ready(function() { $('#container select[name="mySelectName"]').change(function(e) { var s = $(e.target); if (s.val()=='1') //hide/show something; }); }); 

如果您使用AJAX,请尝试使用live()函数:

  $(document).ready(function() { $('#container select[name="mySelectName"]').live('change', function(e) { var s = $(e.target); if (s.val()=='1') //hide/show something; }); }); 

如果我记得正确,你将需要调用blur()让jQuery在IE机器上调用change()。 尝试像这样:

 $("select[name=mySelectName]").click(function() { $(this).blur(); }); 

使用jQuery 1.4.4(我认为1.4.3)似乎现在都是好的….变化事件在我有限的testing中一贯地工作。

添加此行到您的页面头,坐下来放松! 🙂

 $(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});}); 

onchange=doAction将在IE和Firefox中工作,但在Chrome中不受支持。

你需要使用jQuery的.change事件来处理这个事件。

我试图了解为什么你需要在收到事件后仔细检查select的名字。

你有没有机会有相同的ID多个元素?

你是否真的要说“#container select”而不是“#container”?

我只是build立在“Crescent Flesh”为跨平台解决scheme设置的示例上,即使通过AJAX调用将此SELECT内容加载到#container中,该解决scheme也可以继续使用。

 $('#container').bind($.browser.msie ? 'click' : 'change', function(event) { if ((event.type == 'click') || (event.type == 'change')) { if (event.target.toString().indexOf('Select') != -1) { var sWhich = $('#container SELECT').val(); handleSelectionChange(sWhich); } } }); 

现在只需构buildhandleSelectionChange()函数,将其重命名即可。

IE需要将更改事件放置在文档中准备就绪。 这似乎将更改事件绑定到关联的元素。 希望能帮助到你。

:D:D哇,我find解决scheme…为什么认为这么复杂? 只是:
<select onchange="doAction">