2013-09-06 21 views
5

次のAJAXコードを使用して別のHTMLファイルのコンテンツをインデックスページに追加しています。 AJAXは正しく動作し、コンテンツは表示されますが、CSSでコーディングしたスタイルはAJAXの実行後に適用されません。AJAXの実行後にCSSスタイルがリフレッシュされない

私はネットを検索して問題の答えを探していましたが、これまでに試したソリューションはうまくいきませんでした。私が追加しているコンテンツでCSSの更新を強制しようとすると、.trigger( 'create')を使用していますが、動作しません。ブラウザで手動でページを更新すると、スタイルが適用されます。 AJAXの実行後にページ全体をリフレッシュせずにスタイルをリフレッシュする方法について、誰かが正しい方向に向けることができますか?インデックスページに追加されている

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

HTML:default.cssに適用されて

<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--> 

CSSスタイル:

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

Hi Leann、ブラウザ*は、AJAX経由で追加されたHTMLにスタイルを適用する必要があります。そうでない場合は、CSS selectにタイプミスがないことを確認します。私の見ているもののようには見えませんが、それ以上のことがあるかどうかはわかりません。もう1つのトラブルシューティングのステップは、ファイルにHTMLを直接配置して、スタイリングされることを検証し、JavaScriptを式から削除することです。それがスタイルであれば、それはJSで何か不思議な出来事になるように問題を絞り込むべきです。 – jmbertucci

答えて

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

ちょっとライオン、お返事ありがとうございました。しかし、jQueryで色を適用するのではなく、スタイルシート自体からCSSを制御したいと考えています。私はこれがうまくいく(xうまくいけば!)後、もっとたくさんのスタイリングが必要です。 AJAXの実行後にスタイルシートを強制的に更新する方法を知っていますか? – Leann

+0

leboloと同じですが、ページに何かを追加するためにいくつかのAjax呼び出しを行いました。問題なくスタイルシートを読むことができます。あなたはあなたの問題についてより具体的になりますか? –

+0

誰もが、私は別の方向にjQueryを採用することに決めました。既に存在するスタイルでうまくいくようです。この質問はもう有効ではありません。お返事ありがとうございます! – Leann

1

AJAX呼び出し後にスタイルを更新する必要はありません。例としてjsFiddleを作成できますか?

私のために働くjsFiddleを作成しました。しかし、私は注入HTMLをdivで囲む必要がありました。私も.trigger('create')コードを取り除いた。

関連する問題