問題を示すために jsbin を作成しました: http://jsbin.com/dexeqiz/edit?html,js,output
このhtmlを持っている:
<div id='log'></div>
<div id='scripts'></div>
そしてjs:
$.get('...', function(){
$('#scripts')
.append("<script>$(function(){$('#log').append('<p>3</p>');});<\/script>");
$('#log').append('<p>1</p>');
$('#log').append('<p>2</p>');
});
jquery 1および2で
#log に表示されます:
3
1
2
しかし、jquery 3 では
1
2
3をレンダリングします
(したがって、ajax ハンドラー全体が完了した後にのみ 3 が追加されます)
これは問題です。私のコードでは、前の行に追加されたコードが次の行を呼び出す前に実行されることを予期している場合があるためです。
今のところ私の唯一の回避策は、コードを の後に置くことです.append(newhtml)
がsetTimeout
、ユーザーにとっては少し遅く見えるので、そうしないことをお勧めします。私はむしろ次のようなものが欲しい$.when(append).done(function(){code})
更新:$(function(){});
これは、ドキュメントの準備が整った非同期ロード
用のjQuery 3スクリプト( https://github.com/jquery/jquery/issues/1895 )から開始し、これが私の現在のソリューションであるために発生しているようです: http://jsbin.com/ xayitec/edit?html,js,出力