Событие изменения jQuery на <select>не запускается в 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 jQuery live пришлось официально исключить change из списка поддерживаемых событий (к сведению, спецификация DOM гласит change должен всплыть ) . ^{[ 1 ]}

Что касается вашего вопроса, вы можете связать непосредственно с каждым выбором:

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

Если вы действительно хотите делегировать события, вы могли бы найти некоторый успех, пытаясь, что этот человек сделал и связывал с click только в IE, что делает пузырем :

$('#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 теперь имитирует всплывающее событие change в IE через live() / on().}

Answer 2

с использованием jquery 1.4.4 (и я думаю, что 1.4.3), кажется, теперь все хорошо ... событие изменения работает последовательно в моем ограниченном тестировании.

Answer 3

Если я правильно помню, вам нужно вызвать blur (), чтобы jQuery вызывал change () на машинах IE. Попробуйте что-то вроде:

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

Answer 4

Идея, которая может помочь:

$(document).ready(function() {
  $('#container select[name="mySelectName"]').change(function(e) {
    var s = $(e.target);
    if (s.val()=='1') //hide/show something;
  });
});

Если вы используете AJAX, попробуйте live () function:

 $(document).ready(function() {
       $('#container select[name="mySelectName"]').live('change', function(e) {
        var s = $(e.target);
        if (s.val()=='1') //hide/show something;
      });
    });

Answer 5

onchange=doAction будет работать в IE и Firefox, но не поддерживается в Chrome.

Вам нужно использовать событие jQuery .change для обработки этого.

Answer 6

Добавьте эти строки в заголовок своей страницы, откиньтесь на спинку кресла и расслабьтесь! :)

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

Answer 7

IE требует, чтобы событие изменения было помещено в готовый документ. Это, кажется, связывает событие изменения со связанным элементом. Надеюсь, это поможет.

Answer 8

: D: D Ого, я находил решение ... Почему так сложно думать? Просто:
<select onchange="doAction">

Answer 9

Я просто опираюсь на пример, установленный "Crescent Flesh" для кроссплатформенного решения, которое выживет, даже если загрузить этот SELECT внутри #container с помощью вызова AJAX.

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

Я пытаюсь понять, почему вам нужно дважды проверить имя выбора после получения события.

У вас случайно есть несколько элементов с одинаковым идентификатором?

Вы действительно хотели сказать "#container select" вместо "#container"?