Почему родительские/ближайшие (селекторные) функции jQuery ведут себя по-разному в IE8?

У меня есть скрипт jQuery, который отлично работает в Chrome 11 и Firefox 4, но в IE8 он не работает. Похоже, это связано с использованием функции jQuery parent() с селектором. Он не возвращает никаких элементов при запуске в IE8.

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

Кто-нибудь может сказать мне, что здесь происходит?

ОБНОВЛЕНИЕ. Использование closest() похоже приводит к аналогичному поведению, но кажется быть более подходящим в этом случае.


person Rob van Groenewoud    schedule 10.05.2011    source источник
comment
Поддерживает ли вообще IE 8 атрибуты data-? Работает ли это, если вы используете атрибуты, отличные от data-? И вы уверены, что вам нужно parents(), а не nearest()?   -  person Craig Stuntz    schedule 10.05.2011
comment
@Craig: я начал с рабочего прототипа, пытающегося также поддерживать IE, поэтому не пробовал атрибуты, отличные от данных. Я думаю, вы имели в виду ближайший (), который, кажется, больше того, что я ищу. Я посмотрю на это.   -  person Rob van Groenewoud    schedule 10.05.2011


Ответы (2)


Должны ли элементы верхнего уровня быть разделами? Похоже, вы столкнулись с одной из областей, где вас ограничивает отсутствие поддержки HTML5 в IE8. Если вы измените разделы на div, код будет работать как есть.

Поддержка разделов в браузерах.

person Jeff Davis    schedule 10.05.2011
comment
Вот и все! Изменение разделов на div действительно исправляет это. Пока мне просто придется жить с меньшей семантической разметкой. К сожалению, моя компания, вероятно, не обновится до IE9 в ближайшее время. Спасибо Джефф! - person Rob van Groenewoud; 10.05.2011
comment
Однако я не знал, что механизм селектора jQuery ограничен поддержкой браузера. Я должен учитывать это в будущем. - person Rob van Groenewoud; 10.05.2011

Глядя на селекторы в вашем jsFiddle, я смог заставить его нормально работать в IE8, если бы я просто избавился от второй части селектора.

$(document).ready( function(){
     $('a[data-detailed]').live('click', function(event){
        var a = $(this);
        var key= a.attr('data-detailed');

        $(".detailedOverview[data-detailed="+key+"]").slideToggle('fast');
        $(".masterOverview").slideToggle('fast');
        event.preventDefault();   
    });

    $('a[href=#back]').live('click', function(event){
        var a = $(this);
        var detailedOverview= a.parents("[data-detailed]");

        $(".masterOverview").slideToggle('fast');         
        detailedOverview.slideToggle('fast');

        event.preventDefault();   
    });
});

В каждом из ваших селекторов у вас был ", fileparent" после селектора. Нет необходимости указывать родителя таким образом, и избавление от него работает. На самом деле вы можете полностью избавиться от fileparent.

person Jeff Davis    schedule 10.05.2011
comment
fileparent — это контекст для поиска (если он не указан, jquery будет искать, начиная с корня документа). В случае этого вопроса контекст должен быть fileParent[0]. Без контекста работает, только если элементы уникальны в документе, например, для селектора ".detailedOverview[data-detailed="+key+"]". - person manji; 10.05.2011
comment
Раньше у меня был только один раздел, в этом случае вы абсолютно правы в том, что файлParent не нужен. Однако страница динамически создается, и как только появляется несколько разделов, необходим контекст, чтобы предотвратить переключение всех аналогичных обзоров в других разделах. Думаю, я слишком упростил свой пример, добавив только один раздел, извините за это. Я обновил файл jsFiddle. - person Rob van Groenewoud; 10.05.2011