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

10 52
javascript jquery internet-explorer-8 javascript-events

10 ответов:

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

на самом деле, именно из-за этой ошибки IE, что jQuery live официально исключить change С список поддерживаемых событий (к вашему сведению DOM spec заявляет changeдолжен пузырь).[1]

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

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

70

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

$(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();
});
3

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

3

добавьте эти строки в голову страницы, сядьте и расслабьтесь! :)

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

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

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

1

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

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

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

0

Я просто строю на примере, заданном "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 (), переименовывая ее по своему усмотрению.

0

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

0

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

-2