jqueryのHTMLを読み込む

問題：jqueryのHTMLを読み込む

私はかなり簡単jquery.Itsを使用してdivの内側にAJAXを介して外部のHTMLをロードします。しかし私の場合、htmlには多くのスクリプトとCSSタグがあり、htmlがロードされるとすぐに$.ajax().done()イベントが発生しますが、タグのロードが完了するのを待たず、したがってこれらのタグに依存するjsコードが失敗します。

目的：この質問の

目的はhtmlとそのタグは、このようなケースでは、完全にロードされたときを知るために使用することができる任意eventがあるかどうかを知ることです。

以下の例は、私の問題を説明するサンプルです。 jquery-uiをインデックスに移動するようにアドバイスしないでください。これは問題を説明するためのものです。 index.htmlの実行中にコンソールでエラーが表示されることがあります。TypeError: $(...).draggable is not a functionまだバックグラウンドでロードされているためです。

のindex.html：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Load remote content into object element</title> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
</head> 
<body> 
    <div id="siteloader">loading ...</div> 

    <script> 
     $(function() { 

      $.ajax({ 
       type: 'GET', 
       dataType: 'html', 
       url: 'dynamic.html' 
      }).done(function(html) { 
       $("#siteloader") 
       .html(html); 
       //draggable fails here 
       $("#draggable").draggable(); 
      }); 
     }); 
    </script> 
</body> 
</html>

dynamic.html：（あなたはAJAXを呼び出しているところから）あなたの最初のページで

<h1>Dynamic HTML</h1> 
<h2>with big js css files</h2> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 

<style> 
    .demo-description { 
     clear: both; 
     padding: 12px; 
    } 
    .ui-draggable, 
    .ui-droppable { 
     background-position: top; 
    } 
    #draggable { 
     width: 150px; 
     height: 150px; 
     padding: 0.5em; 
    } 
</style> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js" type="text/javascript"> 
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript"> 
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.js" type="text/javascript"> 
</script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"> 
</script> 
<script> 
    $(function() { 
     console.log('Dynamic html loaded'); 

    }); 
</script>

出典

2016-08-26 django

プットで見ることができ、 '$（ "＃ドラッグ"）（）ドラッグ;。代わりに' index.html'ためのdynamic.html' 'で'あなたは 'dynamic.html'のjquery-uiをロードしています –

目的は私が使用できるイベントがあるかどうかを知ることです、jqueru-uiの使用法は単なる例です。ロジックなどのjsファイルにすることができます – django

ロードjqueryのUI

<head> 
    <meta charset="utf-8"> 
    <title>Load remote content into object element</title> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    // load jquery ui here 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script> 
</head> 
    .....

Jav DOMテキストとして挿入されたスクリプトは実行されません。 draggable()（jquery ui）がdynamic.htmlにロードされており、draggable()機能を持たないindex.htmlで使用しています。 index.html自体に必要なjsをすべてロードすることができます。あるいは、dynamic.htmlにdraggable()を呼び出すことです。私は最初に行くことを好む。

スクリプトを実行する必要があるなら、あなたは$.getScript()

出典

2016-08-26 17:22:50 bipen

uiは例です。任意のjsファイルと見なします – django

jsから使用するすべての機能を認識するように、メインページで使用するjsをロードします。または、スクリプトを実行するjquery 'https：// api.jquery.com/jquery.getscript /'には関数がありますが、コードを少し更新したと思います。それを見てみましょう。 – bipen

html経由で挿入されたJavaScriptは実行されます。上記の例では、しばらくすると、ロードされると、index.htmlでもjquery-uiが利用できるようになります。タグを含めて読み込みが完了したときにどうすればよいか知る必要があります – django

答えて

関連する問題