Событие изменения jQuery в <select> не работает в 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 событие изменения не срабатывает. Кто-нибудь знает, почему? Спасибо!

Ответы

Ответ 1

Событие change не пузырится в IE (см. здесь и здесь). Вы не можете использовать делегирование событий в тандеме с ним.

Фактически, из-за этой ошибки IE, что jQuery live должен был официально исключить change из списка поддерживаемых событий (FYI: условия спецификации 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 теперь имитирует событие bbbling change в IE через live()/on().}

Ответ 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;
      });
    });

Ответ 3

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

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

Ответ 4

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

Ответ 5

Добавьте эти строки в свою страницу, откиньтесь и расслабьтесь!:)

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

Ответ 6

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

Чтобы обработать это, вам нужно использовать событие jQuery .change.

Ответ 7

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

У вас есть несколько элементов с одним и тем же идентификатором?

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

Ответ 8

Я просто основываюсь на примере, заданном "Crescent Flesh" для кросс-платформенного решения, которое сохранится даже при загрузке этого SELECT внутри # контейнера через вызов 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(), переименовывая ее, как хотите.

Ответ 9

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

Ответ 10

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