17

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

使用.load():

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

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

使用$.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 を取得しようとしていますが、返された HTML のスクリプトが追加時に消えるか、またはそうするので、.load()うまく使用できませんでした。$.ajax()まったく実行しません。

4

3 に答える 3

22

をフラグメント セレクターと共に使用する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');

デモ:フィドル

于 2013-05-03T05:48:50.703 に答える
4

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

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

あなたが使用することができます

$('#new_content').load(url+' #content > *',function() {my_function(my_param);});
于 2013-09-25T09:54:04.150 に答える
2

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

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

または、JavaScript コンテンツを別のファイルに移動して、

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

または単に使用する、

eval(source);
于 2013-05-03T05:53:13.967 に答える