JQuery динамическая загрузка CSS странное поведение

Question

Приложение, над которым я работаю, требует динамической загрузки CSS и JS, сейчас решение выглядит следующим образом:

myapp.loadCss = function(css){
       $("head").append("<link>");
       cssDom = $("head").children(":last");
       cssDom.attr({rel:  "stylesheet",
                 type: "text/css",
                 href: css
                });  
}

myapp.loadJs = funciton(js){
...
//$.ajax call is used in synchronized mode to make sure the js is fully loaded 
}

}

Когда необходимо загрузить некоторые виджеты, обычно вызывается be

myapp.loadCss('/widgets/widget1/css/example.css');
myapp.loadJs('/wiggets/widget1/js/example.js');

Странно то, что время от времени (1 из 10 или 20) вновь созданные элементы dom из example.js не смогут получить свой CSS из example.css, однако, похоже, мой метод loadCss загрузить CSS в синхронизированном режиме? Я попытался заменить свой loadCss следующим кодом:

myapp.loadCss(css){
 $('<link href="' + css + '" rel="stylesheet" type="text/css" />').appendTo($('head'));

}

Кажется, все в порядке (я обновлял веб-страницу сто раз для проверки :-() Но, к сожалению, этот метод не удался в IE (IE7, не тестировался в IE6, 8)

Есть ли лучшее решение для этого?

Answer 1

Прежде всего, вы можете написать

 cssDom = $("head").append("<link>");

Это может помочь, потому что потенциально два вызова вашего скрипта могут быть запущены почти одновременно, и в результате вы добавите два тега, и только один из них будет изменен (дважды), поэтому один css будет отсутствовать.

О IE7 - из моего собственного опыта самая распространенная ошибка - добавление запятой для последнего элемента в динамическом объекте

var zzz = {a:'a', b:'b',}