jquery - 如何应用使用 jQuery 动态加载的内联和/或外部 CSS

Question

我有一个使用 jQuery 加载到 Yahoo 弹出窗口中的 Ajax 控件。

我只是使用一个简单的 .get 请求来加载 HTML。

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

现在的问题是加载的内容需要自己的 CSS，它实际上是动态创建的。我可以选择内联或使用外部 CSS 样式表。

在 Chrome 中进行的测试表明，通过 AJAX 加载的 CSS 在使用上述代码添加到 DOM 时未被评估/应用。

Internet Explorer 将评估一个内联 CSS，当它刚好卡在 DOM 中时，但 Chrome 不会。由于一个完全不相关的问题，我目前无法在 FireFox 中进行测试。

jQuery 中是否有任何方法可以评估动态添加到 DOM 的样式表，无论是内联还是 ？

我想这样做有很多原因:

• 弹出窗口中的 CSS 属于弹出窗口，可能完全来自不同的环境
• 它是动态的，除非绝对必要，否则我不想将它放在父页面中
• 我计划让它像这样工作，但它没有! :-(

Answer 1

给定样式表的路径(或生成有效 CSS 的一些 URL):

var myStylesLocation = "myStyles.css";

...其中任何一个都应该有效:

使用 AJAX 加载

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});   

使用动态创建的加载

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

使用动态创建的<style>加载

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

或

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");