Unexpected call to method or property access. jquery.js?ver=1.7.1

Question

I'm getting 'Unexpected call to method or property access' in IE7 and my script won't work in IE8 and I can't for the life of me figure out why.

I've been using developer tools in IE (woohooo!) but it isn't much help. The error I am getting is in Jquery:

SCRIPT65535: Unexpected call to method or property access. jquery.js?ver=1.7.1, line 3 character 31871

It works perfectly fine in IE9, Safari, FF and chrome.

On the Html page, I click the following link which passes the vale of the data-tax attribute to the script. Do you think perhaps it has to do anything with html5? Any pointers will be much appreciated.

For example, if you click Brad Pitt, it should display movies Brad Pitt is in:

<li class="ajaxFilterItem brad-pitt af-actor-6 filter-selected" data-tax="actor=6"><a href="#" class="ajax-filter-label"><span class="checkbox"></span>Brad Pitt</a> (1)</li>

I pass the following value to

filterAjaxify("actor=6")

And this is the offending code:

(function($){
    var isRunning = false;
    // Return an array of selected navigation classes.
    function loopSelected(_node) {
        var _arr = [];
        _node.each(function(){
            var _class = $(this).attr('data-tax');
            _arr.push(_class);
        });
        return _arr;
    };

    // Animate the progress bar based on Ajax step completion.
    function increaseProgressBar(percent){
        $('div#progbar').animate({
            width: percent + '%'
        },30);
    };

    // Join the array with an & so we can break it later.
    function returnSelected(){
        var selected = loopSelected($('li.filter-selected'));
            return selected.join('&');
    };

    // When the navigation is clicked run the ajax function.
    $('a.ajax-filter-label, a.paginationNav, a.pagelink').live('click', function(e) {
        if(isRunning == false){
            isRunning = true;
            e.preventDefault();
            var relation = $(this).attr('rel');
            if($(this).parent('li').length > 0) {
                $(this).parent('li').toggleClass('filter-selected');
                thisPage = 1;
            }
            if(relation === 'next'){
                thisPage++;
            } else if(relation === 'prev') {
                thisPage--;
            } else if($(this).hasClass('pagelink')){
                thisPage = relation;
            }
            filterAjaxify(returnSelected());
        }
    });

    // Do all the ajax functions.
    function filterAjaxify(selected){
        $.ajax({
            url: ajaxurl,
            type: 'post',
            data: {
                "action":"affilterposts",
                "filters": selected,
                "posttypes": posttypes,
                "qo": qo,
                "paged": thisPage,
                "_ajax_nonce": nonce
            },
            beforeSend: function(){
                $('div#ajax-loader').fadeIn();
                $('section#ajax-filtered-section').fadeTo('slow',0.4);
                increaseProgressBar(33);
            },
            success: function(html){
                increaseProgressBar(80);
                $('section#ajax-filtered-section').html(html);
            },
            complete: function(){
                $('section#ajax-filtered-section').fadeTo('slow',1);
                increaseProgressBar(100);
                $('div#ajax-loader').fadeOut();
                isRunning = false;
            },
            error: function(){}
        });
    };
})(jQuery);

Answer 1

The <section> is new in HTML5, older IE doesn't know how to digest that, and has some DOM issues when you try and append things to such elements.

Eg http://jsfiddle.net/EKU7R/