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中冒泡（请参阅here和here）。您不能将事件委托与其一起使用。

~~事实上，正是由于这个IE bug，jQuery live必须从list of supported events正式排除change（原始数据显示DOM规范change should bubble） ^[1]~~

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

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

如果您真的想要事件委派，那么可能会在IE中尝试this person did并绑定到click找到一些成功，其中冒泡：

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

但是这种浏览器检测确实是错误的。我真的尝试使用前一个例子（直接绑定到dropdown）。除非你有数百个<select>框，否则事件授权在这里不会给你带来太大的帮助。

_{[1]注意：jQuery＆gt; = 1.4现在通过live()/on()模拟IE中的冒泡change事件。}

Answer 2

可能有所帮助的想法：

$(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;
      });
    });

Answer 3

如果我没记错的话，你需要调用blur（）让jQuery在IE机器上调用change（）。尝试类似：

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

Answer 4

使用jquery 1.4.4（我认为1.4.3）现在似乎都很好....变更事件在我的有限测试中始终如一。

Answer 5

将此行添加到您的页面头部，坐下来放松一下！：）

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

Answer 6

onchange=doAction可以在IE和Firefox中使用，但Chrome不支持。

您需要使用jQuery的.change事件来处理此问题。

Answer 7

我正在尝试理解为什么在收到事件后需要仔细检查选择名称。

您是否有任何机会拥有多个具有相同ID的元素？

你真的想说“#container select”而不是“#container”吗？

Answer 8

我只是在“Crescent Flesh”设置的示例基础上构建了一个跨平台的解决方案，即使通过AJAX调用将此SELECT加载到#container中也能够存活。

$('#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);
    }
  }
});

现在您只需构建handleSelectionChange（）函数，并根据需要重命名它。

Answer 9

IE要求将更改事件放在文档准备就绪中。这似乎将change事件绑定到关联元素。希望它有所帮助。

Answer 10

：D：D哇，我找到了解决方案......为什么这么复杂？简单地说：
<select onchange="doAction">

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

10 个答案: