AJAXのロードされた要素に埋め込まれたJSを実行しているときに、onloadを待ちますか？

Question

AJAX経由でdivの内容を読み込んでいるとします。この要素にはさまざまな要素とJSコードが含まれているものとします。

スクリプトがトリガするのを待つ必要がありますか、または直後にDOMの変更を開始するだけで安全ですか？次の例は安全ですか？

<form id="foo">...</form> 
<script type="text/javascript"> 
    $("#foo").bar(); 
</script> 

または私は常に次の作業を行う必要があります。

<form id="foo">...</form> 
<script type="text/javascript"> 
    $(function(){ 
     $("#foo").bar(); 
    }); 
</script> 

Answer 1

通常、あなたがそれに埋め込まれたスクリプトでHTMLを返す非同期要求を持っており、DOMにそれを追加した場合、スクリプトが実行されません。しかし、jQueryは、これらの組み込みスクリプトを解析して実行するajaxコードの機能を備えています。 this pageから

：

異なるデータ処理が は、データ型のオプションを使用することによって達成することができます。 plain xmlの他に、dataTypeは html、json、jsonp、script、textのいずれかです。

textおよびxmlタイプは、処理なしでデータ を返します。データは、それぞれ が XMLHttpRequestオブジェクトのresponseTextまたは responseXMLプロパティのいずれかを使用して、成功ハンドラ にそれぞれ渡されます。

注：Webサーバー によって報告されたMIME のタイプが、私たちの選択したdataTypeと一致していることを確認する必要があります。 の場合、XMLは というtext/xmlまたは application/xmlとして宣言されていなければなりません。 という結果が得られます。

HTMLが指定されている場合はHTMLが 文字列として返される前に、取得したデータ 内部に埋め込まれたJavaScript が実行されます。同様に、 スクリプトは、サーバ から引き戻されたJavaScript を実行し、スクリプト自体を テキストデータとして返します。

jQueryはスクリプトを最初に実行するので、組み込みスクリプトコードはhtmlがdomに追加される前に実行されます。これを回避するには、機能としてラップJavaScriptコードを返す必要があります。

function doAfterLoad() { 
// ... 
} 

をそしてちょうど負荷やAJAXメソッドの成功コールバックでこの関数を呼び出します。

('#result').load('ajax/test.html', function() { 
    doAfterLoad(); 
});