<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">