AJAX 运行后 CSS 样式不会刷新答案

【问题标题】：CSS styles won't refresh after AJAX runsAJAX 运行后 CSS 样式不会刷新
【发布时间】：2013-09-06 02:25:24
【问题描述】：

我正在使用下面的 AJAX 代码将另一个 HTML 文件中的内容附加到我的索引页。 AJAX 工作正常，我的内容也显示出来了，但是我在 CSS 中编码的样式在 AJAX 运行后没有被应用。

我一直在网上寻找问题的答案，但到目前为止我尝试过的解决方案都没有奏效。下面我正在使用 .trigger('create') 尝试强制对我要附加的内容进行 CSS 刷新，但它不起作用。如果我通过浏览器手动刷新页面，则会应用我的样式。有人可以指出我在 AJAX 运行后如何在不刷新整个页面的情况下刷新样式的正确方向吗？

$.ajax({ type: "GET",   
    url: pageToLoad,   
    async: false,
    success : function(data)
    {
        $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create');
    }
});

附加到索引页面的 HTML：

<div class="content" id="portfolio">
    <div class="wrapper">
         <h2>Portfolio</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum libero non egestas dapibus. Nam gravida, libero ac posuere eleifend, mauris nisi venenatis metus, non hendrerit magna justo eget lectus.</p>
    </div><!--wrapper-->
    <div class="clear"></div>
</div><!--content-->

在 default.css 中应用 CSS 样式：

#index {background-color:#82e4e5;}
#portfolio {background-color:#fb5656;}

【问题讨论】：

嗨 Leann，浏览器应该将样式应用于通过 AJAX 添加的 HTML。如果不是，请确认 CSS 选择中没有错字。从我看到的情况来看，它看起来不像，但我不知道是否还有更多的事情发生。另一个故障排除步骤可能是将 HTML 直接放入您的文件中以验证它是否会设置样式，从等式中删除 JavaScript。如果它确实有样式，那么它应该将问题缩小为 JS 中发生的一些奇怪的事情。

标签： jquery css ajax

【解决方案1】：

你试过了吗？

$.ajax({ type: "GET",   
    url: pageToLoad,   
    async: false,
    success : function(data)
    {
        $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create');
        $('#index').css( "backgroundColor", "#82e4e5" );
        $('#portfolio').css( "backgroundColor", "#fb5656" );
    }
});

【讨论】：

嘿狮子，谢谢你的回复。但是，我希望能够从样式表本身控制 CSS，而不是通过 jQuery 应用颜色。在我得到这个工作之后，我需要做更多的造型（x希望！x）。你知道如何在 AJAX 运行后强制刷新样式表吗？
和 lebolo 一样，我做了一些 ajax 调用来在页面上附加一些东西，所有人都可以毫无问题地读取样式表。你能更具体地谈谈你的问题吗？
大家，我决定把 jQuery 带到另一个方向。它似乎更适用于已经存在的样式。这个问题不再有效。感谢您的回复！

【解决方案2】：

您不需要在 AJAX 调用后刷新样式。你能创建一个jsFiddle作为例子吗？

我创建了一个适合我的jsFiddle。但是我不得不用div 包围注入的HTML。我也摆脱了.trigger('create') 代码。

【讨论】：