1

次の応答を返す ajax 呼び出しがあります。

<div class="content">
    <script language="JavaScript">  
        function validate(){
            alert('validate is working');
        }
    </script>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

今、私は応答を html に変換し、それを ajax 呼び出しを行ったページに追加したいと考えています。

$.get('test.php', function(data) {
    $('#someTarget').append($(data).find('.content').html());
});

上記のコードを試してみましたが、これはコンテナ div を追加するだけのようです。既存のページに JavaScript コード ブロックを追加する方法はありますか?

4

1 に答える 1

1

あなたのコードには2つの問題があります:

$('#someTarget').append($(data).find('content').html());

  1. $(data)スクリプトをDOMに挿入する前に、スクリプトを解析して実行します

  2. html() がコンテンツの innerHTML を返すことを意味していると仮定すると$(data).find('.content').html()、必要なのは$(data).

これを試して：

<div class="content">
    <style type="text/javascript">  
        function validate(){
            alert('validate is working');
        }
    </style>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

ここでトリックがあります<style>。スクリプトをラップするために使用しています。スクリプトは、解釈して DOM に挿入した後に実行する必要があります。

$.get('test.php', function(data) {

    // parse HTML to DOM
    var $data = $(data);

    // take the scripts out
    var $inlineScripts = $('style[type="text/javascript"]', $data).remove();

    // Now append the DOM
    $('#someTarget').append($data);

    // And globalEval the scripts
    $inlineScripts.each(function () {
        $.globalEval(this.innerText);
    });
});

クリック ハンドラーによって呼び出される単純な検証関数についてはわかりました。現在、インライン スクリプトに私のトリックは必要ありませんが、HTML が解析されて挿入された後に実行する必要があるアクティブなスクリプトがある場合は必要になります。

更新:「.content」を挿入したくない場合は、html() を使用しないでください。文字列を返すため、html を 2 回解析する必要があります。代わりに.append( $(".container", $(data)) )またはを使用し.append( $(data).find(".container") )ます。

于 2012-11-14T15:41:34.020 に答える