以下の 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;}