2016-10-21 4 views
0

jquery.load()で.htmlコンテンツをロードしていますが、.load()関数によってロードされた後にjavascriptおよびcssがone.html/two.htmlに適用されません。ロード済みのjavascriptとcssを.load()のコンテンツに適用するにはどうすればよいですか?

例以下:

<head> 
    <style> styles1 </style> 
    <link href="stylesheets/style2.css" rel="stylesheet"> 
    <script src="script1.js"> 
    <script>  
     $(document).ready(function(){ 
      $("button.os").click(function(){ 
       fillmein = $(this).attr("target"); 
       fillmeinfile = $(this).attr("target")+'.html'; 
       $("."+fillmein).load("/contentfolder/"+fillmeinfile); 
      }); 
     }); 

    ... 
    other scripts 
    ... 
    </script> 
</head> 

<body> 
    <p>the css and any js is applied to this block</p> 
    <button class="os" target="one">replace</button> 
    <div class="one">I will be replaced by one.html</div> 
    <button class="os" target="two">replace</button> 
    <div class="two">I will be replaced by two.html</div> 
</body> 

私はone.html/two.htmlのスタイルの後にロードされ、JavaScriptはブラウザによってロードされていることを理解し、私は<head>であるスタイルとJavaScriptを取得する方法新たにロードされたone.html/two.htmlに適用するには?

私はjQueryを初めて使用しましたので、必要に応じて明確にする方法を教えてください。ありがとう!

EDIT 回答ありがとうございました!私が意味していたことを明確にするコード例を更新しました。

<style><script>をone.htmlとtwo.htmlにコピーしますが、javascriptを2回ロードすると衝突する可能性があります。たとえば、$(document)を検索するロジックを持ち、セクションを折りたたんで展開する関数を複数回呼び出すことができます。メインページにロードされたjsとcssを新しくロードされた.htmlファイルで動作させることは可能ですか、これを行うにはクリーンでドライな方法がありますか?

+0

content.html –

+4

の内容は何ですかhttps://plnkr.co/edit/7bYF2ynE92X0as6lsqCh?p=preview –

+0

あなたもjsとcssコードを投稿できますか? –

答えて

0

あなたは書くことができます

$('button').on('click','Classname',function(){ 
    //write your structure here 
    }) 

これは、すでに存在しているかはdyanamically、後で追加'Classname'持つすべてのタグのために動作します。彼のコメント

にアルンPジョニーによって示唆されるように

1

あなたは、単にターゲット文書にあなたのCSSをインラインを入れて、それが自動的にコンテンツと一緒にロードされます。

関連する問題