web-dev-qa-db-ja.com

jQuery .load（）/ .ajax（）は、追加後に返されたHTMLでJavaScriptを実行しません

.load()および_$.ajax_を使用して、コンテナに追加する必要のあるHTMLを取得しようとしましたが、返されたHTML内のJavascriptは、要素に追加するときに実行されません。

.load()を使用：

_$('#new_content').load(url+' #content > *',function() {
    alert('returned');
});
_

また、$。ajax呼び出しに切り替えてみました。次に、返されたHTMLからスクリプトを抽出した後、コンテナに追加しましたが、同じ問題、この場合はJSが実行されておらず、追加されることさえありません。理解できるように、_<script>_このようなDOM要素に眉をひそめていますか？

_$.ajax_を使用：

_$.ajax({ url: url }).done(function(response) {
    var source  = $("<div>").html(response).find('#overview_script').html();
    var content = $("<div>").html(response).find('#content').html();

    $('#new_content').html(content);
    $('<script>').appendTo('#new_content').text(source).html();

});
_

理想的には、HTMLを追加した後、コールバックでこのjavascriptを実行しますが、変数はコントローラーから返される値に設定されます。

したがって、要約すると、そのHTMLが追加された後に実行する必要があるJSを含むHTMLを取得しようとしていますが、.load()または$.ajax()を使用して運がありません返されたHTML内のスクリプトは、追加時に消えるか、まったく実行されません。

javascriptjqueryajaxload
17
John

load()がフラグメントセレクタで使用されると、フラグメントが追加される前にスクリプト要素が削除されるため、 スクリプトは実行されません になります。

接尾辞付きのセレクター式なしでURLを使用して.load（）を呼び出すと、スクリプトが削除される前にコンテンツが.html（）に渡されます。これにより、スクリプトブロックは破棄される前に実行されます。ただし、URLにセレクター式を追加して.load（）が呼び出された場合、スクリプトはDOMが更新される前に削除されるため、実行されません。両方の場合の例を以下に示します。

やってみて

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

デモ： フィドル

22
Arun P Johny

実行するスクリプトが何であるかがわかっている場合は、ajax応答以外の別の場所でスクリプトを定義し、コールバックから呼び出すことができます。代わりに：

$('#new_content').load(url+' #content > *',function() {alert('returned');});

使用できます

$('#new_content').load(url+' #content > *',function() {my_function(my_param);});
4
Marc

このコードはどうですか、

$('#new_content').append($('<script>').html(source));

または、単にJavaScriptコンテンツを別のファイルに移動して、それを使用してロードすることができます

$.getScript("url to js file");

または単に使用する、

eval(source);
2
Chamika Sandamal