IE doesn't load css for .load() elements & js doesn't work

Question

I load my content with .load() with this function:

$(document).ready(function(){
    $("nav a").click(function () {  
    $("#main-content").load($(this).attr("href") + " #content > *");
    return false;
   });
});

index.php contains the style and scripts.

The loaded content just contains the content in a div without head, body or styles.

Problems:

- IE8 doesn't load styles & this function doesn't work:

$(document).ready(function() {

   if ($(window).width() < 630) {
        $('aside').each(
            function(){
                $(this).parents('article').find('h2').after(this);
                    }
        );  
        }

   if ($(window).width() > 630) {
        $('aside').each(
            function(){
                $(this).parents('section').after(this);
                    }
        );  
        }
});


$(window).bind('resize', function(){

   if ($(window).width() < 630) {
        $('aside').each(
            function(){
                $(this).parents('article').find('h2').after(this);
                    }
        );  
        }

   if ($(window).width() > 630) {
        $('aside').each(
            function(){
                $(this).parents('section').after(this);
                    }
        );  
        }

});

I already tried to fix it like the other scripts with:

$(document).ajaxComplete(function(){ });

..but it didn't work.

Any help is very apprechiated.

score 0 · Answer 1 · answered Sep 07 '11 at 16:35

0

Load the CSS explicitly using <link>, and use $.getScript() to load and execute the javaScript file.

answered Sep 07 '11 at 16:35

Blazemonger

90,923
26
142
180

The css is already linked in the head of index.php. getscript() doesn't solve the problem eather. – Peter Kulinski Sep 07 '11 at 16:44
You are using `$("#main-content").load($(this).attr("href") + " #content > *")` which will only load DOM elements matching that selector. It won't grab the CSS (unless you used inline styles). – Blazemonger Sep 07 '11 at 16:47

score 0 · Answer 2 · answered Sep 07 '11 at 18:24

0

Is aside a class?

Then you'll have to use
$('.aside').each( instead of
$('aside').each(.

The same goes for article and section.

answered Sep 07 '11 at 18:24

kalyfe

1,005
1
16
33

score 0 · Answer 3 · edited May 23 '17 at 12:04

I figured out the problem: It's because of the HTML5 elements I use on the page. With HTML5shiv it's no problem to get them running on the page generally but IE won't catch them on loaded content via .load().

Here's a topic going on about that already.

How to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?

innershiv is already a solution:

http://css-tricks.com/6869-html5-innershiv/

EDIT: But still having a problem with the named functions.

IE doesn't load css for .load() elements & js doesn't work

3 Answers3