Why does jQuery's parents/closest(selector) functions behave differently in IE8?

Question

I have a jQuery script that works perfectly fine in Chrome 11 and Firefox 4, but it appears to be broken in IE8. It appears to be related to the use of the jQuery parents() function with a selector. It does not return any elements when run in IE8.

I've created a simplified version of my problem which shows the same symptoms over at jsFiddle, to prevent a big chunk of code here.

Can anybody tell me what might be going on here?

UPDATE: Using closest() seems to result in similar behavior, but seems to be more suitable in this case.

Answer 1

Do the top level elements have to be sections? It looks like you are running into one of the areas where the lack of support for HTML5 in IE8 is limiting you. If you change the sections to divs, the code works as is.

Section support in browsers.

Answer 2

Looking at the selectors in your jsFiddle, I was able to get it to work fine in IE8 if I just got rid of the second part of the selector.

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

In each of your selectors you had a ", fileparent" after the selector. It is not necessary to specify the parent like this and getting rid of it works. In fact you can get rid of fileparent all-together.