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

事实上，正是因为这个 IE 漏洞，jQuery live 不得不正式从 list of supported events 中排除 change（仅供参考，DOM 规范声明 change should bubble） .^[1]

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

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

如果您真的想要事件委托，您可能会在尝试 this person did 并仅在 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 事件。}

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 要求将更改事件放置在准备好的文档中。这似乎将更改事件绑定到关联元素。希望对您有所帮助。

Answer 10

:D:D 哇，我正在寻找解决方案... 为什么想得这么复杂？ 简单地说：
<select onchange="doAction">