javascript - 为什么这个 jquery 在 IE8 中不通过 AJAX 加载内容？

Question

IE 以其令人惊叹的浏览器功能再次令我震惊。这次确保 jQuery.min 文件(google CDN)中出现一个可爱的错误，从而以某种方式导致我的 jquery 无法通过 AJAX 加载内容。

链接如下:http://themes.thefinishedbox.com/portfolio/

在 IE 中测试之前，单击任何其他浏览器中的顶部链接，您将看到它们通过 jQuery 将外部页面加载到附加的 div 中。

我注意到在 IE8 中它似乎已经到达加载器图标并且不加载页面。我已经提醒了 $href 变量，这似乎是正确的 URL。不确定这里发生了什么？

如果有帮助的话，这是来源，或者您可以直接查看 RAW:http://themes.thefinishedbox.com/portfolio/wp-content/themes/portfolio/js/custom.js?ver=3.1 (您需要查看第二个 $(function()

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $('*').removeClass('active');

            $.ajaxSetup ({  
                cache: false  
            });

            var $this = $(this);

            e.preventDefault();

            var $url = $(this).attr('href'); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length === 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($url + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 70;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                            $this.addClass('active');
                        });
                    });
                    $(this).dequeue();
                });

            } 

            if($('#page').length == 1 && $('#pageEntry').length == 1) {

                $('#page').slideUp(function() {

                    $(this).remove();
                    $this.removeClass('active');

                    $('<div id="page" />').insertAfter('#header');

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($url + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 70;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $this.addClass('active');
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

            $('.closex').live('click', function() {
                $(this).parent().parent().slideUp(function() {
                    $(this).remove();
                    $('*').removeClass('active');
                });
            });

        });

    });
}); 

任何帮助将不胜感激!

Answer 1

问题是您正在尝试设置背景颜色的动画

$(this).animate({backgroundColor: '#fff'}, 300);

除非您包含 jQuery UI(实现此功能)，否则不支持此功能。

因此，您传递了无效的输入，并导致 IE 阻塞。

阅读错误 http://bugs.jquery.com/ticket/7256了解更多信息..

包含对 jquery UI 脚本的引用可以修复该问题(已测试)或注释掉该行(因为背景已经是白色)。