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

Question

我有一个包含可变数量<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中,更改事件不会触发.谁知道为什么？谢谢!

Answer 1

该change事件在IE中不会出现泡沫(请参阅此处和此处).您不能将事件委托与其一起使用.

事实上,正是由于这个IE bug,jQuery live必须change从支持的事件列表中正式排除(FYI,DOM规范change 应该冒泡).^{[ 1 ]}

关于您的问题,您可以直接绑定到每个选择:

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

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

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

但是这种浏览器检测感觉非常错误.我真的尝试使用前一个例子(直接绑定到dropdown).除非你有数百个<select>盒子,否则事件授权在这里不会给你带来太多帮助.

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