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

#jquery #internet-explorer-8 #jquery-selectors #parents

#jquery #internet-explorer-8 #jquery-селекторы #родительские

Вопрос:

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

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

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

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

1. Поддерживает ли IE 8 data- атрибуты вообще? Работает ли это, если вы используете не data- атрибуты? И вы уверены, что это parents() то, чего вы хотите, а не nearest() ?

2. @Craig: Я начал с рабочего прототипа, пытаясь также поддерживать IE, поэтому не пробовал атрибуты, отличные от данных. Я думаю, вы имели в виду closest(), который, кажется, больше подходит для того, что я ищу. Я займусь этим.

Ответ №1:

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

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

1. Вот и все! Изменение разделов на divs действительно исправляет это. Мне просто придется пока смириться с меньшим количеством семантической разметки. К сожалению, моя компания, вероятно, не будет обновляться до IE9 в ближайшее время. Спасибо, Джефф!

2. Однако я не знал, что механизм выбора jQuery ограничен поддержкой браузера. Я должен рассмотреть это в будущем.

Ответ №2:

Глядя на селекторы в вашем 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 полностью.

1. fileparent есть контекст для поиска внутри (если не указан, jquery будет выполнять поиск, начиная с корневого каталога документа). В случае этого вопроса контекст должен быть fileParent[0] . Без контекста работает, только если элементы уникальны в документе для ".detailedOverview[data-detailed=" key "]" селектора, например.

2. Раньше у меня был только один раздел, в таком случае вы абсолютно правы в том, что не нуждаетесь в fileParent. Однако страница создается динамически, и как только появляется несколько разделов, контекст необходим для предотвращения переключения всех аналогичных обзоров в других разделах. Думаю, я чрезмерно упростил свой пример, добавив только один раздел, извините за это. Я обновил jsFiddle.