6

私のサイトはjquery.load()、ページの大部分でナビゲーションを行うために使用していました。ロードされたコンテンツの特定の部分のみを含める機能に本当に感謝しています。ここでは id="content" の div です。

$(frame_selector).load(url +" #content", function(response, status, xhr) {...});

しかし今、動的に読み込まれるページの一部であるスクリプトを実行できる必要があります。 Jquery.load()これらのスクリプトは削除されますが、削除されjquery.ajax()ません。jquery.loadそのため、ajax 呼び出しでの部分コンテンツ機能を次のように複製しました。

$.ajax({
  url: url,
  dataType: 'html', 
  success: function(data, textStatus, XMLHttpRequest) {
      // Only include the response within the #content id element.
      $(frame_selector).html( jQuery("<div>")
            .append(data)
            .find("#content")
      );
  }
});

問題は、ajax 呼び出しから動的にロードされるスクリプトが確実に実行されないことです。おそらく実行が早すぎるために、効果がないように見えることがあります。スクリプトは、jquery で DOM 操作を行っているだけです。画像やフラッシュなど、まだ読み込まれていないものには依存していません。行き詰まらないようにするために、私は物事を機能させるためのこの恐ろしいハックを持っています。以下を使用するだけの AJAX ロード スクリプトの代わりに:

$(document).ready( function() {...} );  // unreliable

実行する前にスクリプトを 200 ミリ秒遅らせます。

$(document).ready( window.setTimeout( function() {...}, 200 )); // HATE THIS

遅延をハードコーディングせずにこれを確実に機能させる方法を知っている人はいますか? <script>新しい divにロードするロジックとの間の競合状態だと思います#contentが、どうすればよいかわかりません。

4

2 に答える 2

7

スクリプトは、AJAX を介して追加する DOM 要素を操作していると思います。

jQuery には、ページでイベントがトリガーされるisReadyと設定されるプロパティがあります。ready

以降の呼び出しでは、最初にこのフラグjQuery.ready(...)がチェックされます。isReadyフラグが true に設定されている場合、すぐにハンドラーが呼び出されます。これにより、コードで問題が発生する理由がわかります。

1 つのオプションは、応答を jQuery フラグメントにロードし、<script />後で実行するためにすべてのタグを解析することです。

var ajaxResponse = $(html);
var scripts = ajaxResponse.find('script');

// Move your scripts into a new element
var tempScripts = $().append(scripts);

// Append your content, followed by your script tags
$(document).append(ajaxResponse);
$(document).append(tempScripts);
于 2010-11-02T00:00:48.573 に答える
1

@ダンに答えがあります。ajax 経由でスクリプトをロードする場合、ドキュメントisReadyは true です。これは、これが ajax リクエストによってリクエストされたスクリプト タグである場合を意味します。

<script type="text/javascript">
    if (jQuery.isReady) {
        $('body').append("<div id='new_content'>Document Ready</div>");
    }
    else {
        $('body').append("<div id='new_content'>Document Not Ready</div>");
    }
</script>

解析する代わりに、JSON を利用します。1 つのプロパティが HTML を保持します。別のプロパティがスクリプトを保持します。

次に、これを行うことができます：

$(document).append(ajaxResponse.html);
$(document).append(ajaxResponse.script);

また、コードを囲む ready 関数を使用してスクリプトをロードすると、クロージャーが作成されます。この閉鎖は、ページの存続期間中続きます。ページを更新せずにそのスクリプトをリクエストするたびに、メモリリークが発生します

于 2010-11-02T04:19:01.450 に答える