<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(/*...*/)

如果你真的想要事件委托你可能会发现尝试这个人所做的事情并绑定到IE中的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> = 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

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

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

Answer 6

将这些行添加到页面头部，坐下来放松一下！ :)

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

Answer 7

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

Answer 8

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

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

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

Answer 9

我只是在“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 10

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