Question

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

我一直在网上寻找问题的答案，但到目前为止，我尝试过的解决方案还没有奏效。下面我正在使用.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;}

Answer 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" );
    }
});

Answer 2

在AJAX调用之后，您不需要刷新样式。您可以创建一个jsFiddle作为示例吗？

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

AJAX运行后，CSS样式不会刷新

2 个答案: