javascript-<select>上的jQuery change事件未在IE中触发

我有一个页面,其中包含可变数量的<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中不会触发change事件。 有人知道为什么吗? 谢谢!

10个解决方案
71 votes

live()事件不会在IE中冒泡(请参见此处和此处)。 您不能与其一起使用事件委托。

实际上,正是由于这个IE错误,jQuery live()必须正式将on()从受支持的事件列表中排除(仅供参考,DOM规范指出change应该冒泡)。[1]

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

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

如果您真的想要事件委派,则尝试使用此人所做的事情可能会获得一些成功,并且仅绑定到IE中的live(),但确实会冒泡:

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

但是这种浏览器检测感觉确实是错误的。 我真的会尝试使用前面的示例(直接绑定到下拉列表)。 除非您有数百个live()盒子,否则事件委托不会在这里给您带来很多好处。


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

Crescent Fresh answered 2019-11-18T09:32:05Z
3 votes

可能有帮助的想法:

$(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;
      });
    });
Arnis Lapsa answered 2019-11-18T09:32:35Z
3 votes

如果我没记错的话,您将需要调用blur()来使jQuery在IE计算机上调用change()。 尝试类似的方法:

$("select[name=mySelectName]").click(function() {
    $(this).blur();
});
Daniel Sloof answered 2019-11-18T09:33:01Z
3 votes

使用jQuery 1.4.4(我认为1.4.3)现在似乎一切都很好。...change事件在我有限的测试中始终有效。

user406905 answered 2019-11-18T09:33:27Z
1 votes

将此行添加到您的页面标题,坐下来放松! :)

$(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});
Soheil answered 2019-11-18T09:33:53Z
1 votes

.change将在IE和Firefox中运行,但在Chrome中不支持。

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

Madhura answered 2019-11-18T09:34:23Z
0 votes

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

您是否有多个具有相同ID的元素?

您实际上是说“ #container select”而不是“ #container”吗?

Maciek answered 2019-11-18T09:35:01Z
0 votes

我只是基于“ 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()函数,即可对其重命名。

Volomike answered 2019-11-18T09:35:32Z
0 votes

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

Pramod Kankure answered 2019-11-18T09:35:56Z
-2 votes

:D:D哇,我正在寻找解决方案...为什么认为这么复杂?只是:
<select onchange="doAction">

Jaroslav Štreit answered 2019-11-18T09:36:31Z
translate from https://stackoverflow.com:/questions/1637503/jquery-change-event-on-select-not-firing-in-ie