javascript - ページコンテンツがAjaxで読み込まれた後にJavaScriptを読み込む

原文 javascript jquery ajax coffeescript

Ajax(およびjQuery、さらにはCoffeeScript)を使用して、作成している新しいWebサイトにページをロードしています。次に、ナビゲーションメニューの場合、jQuery関数loadを使用して、ページの一部(つまり、コンテンツ)のみを次のように(/page1から)ロードします。

$( 'a' ).click ->
  $( '#container' ).load '/page2 #content'

  false


これの問題は、JavaScriptコードがpage1(より正確には、テンプレートファイル)にあり、サイトでグローバルです(Rails 3.1を使用しているため、アセットパイプラインが原因です)。このコードは、いくつかのアクションを、page2にあるDOM要素のイベント(正しい用語ですか?)にバインドします。ただし、このスクリプトは最初にロードされたページ(簡単にpage1である可能性があります)で実行されるため、これらのアクションを要素にバインドするスクリプトはpage1で実行されます。バインドする必要があります(page2内)には触れません。

今、私はこれを修正できるいくつかの方法を知っていますが、どちらも好きではありません。これらの1つは、このアクション/イベントバインディングを関数に入れ、Ajaxでpage2をロードした後でこのメソッドを呼び出すことですが、これには、ページをロードするロジックに特別なケースを導入する必要があります。要素をバインドするため、または関数を呼び出すpage2コンテンツにスクリプトを含めるために、ページの読み込み後に関数をバインドします。

(<a>タグのhref属性を使用して)ページをロードするより一般的な方法があり、ページのロードに特別なケースを導入すると、すべてが醜くなります。後者の解決策は私が信じているかなり良い解決策ですが、私が取得しているページのコンテンツに<script>タグを挿入するのは嫌です。私はコンテンツを行動などから分離するのが好きで、これが少し混同しているかもしれないと感じています。

だから、私がここで本当に知りたいのは、この問題を解決するための良い方法とは何かです。これを行う方法を知っている人がいれば、私はどんな提案も歓迎します。
答え
jQueryのlive()イベントバインディングを調べてみてください。

live()でバインドされたイベントは、遡及的に追加されたDOM要素にも適用され、問題を解決するはずです。

編集:正確に言うと、live()$(document)にバインドし、DOM全体にバブリングしたイベントのtarget属性をチェックします。これが、イベントコールバックのバインド後に要素が追加された場合でも、バインドが機能する理由です。

HTMLの例:

<div id="some_triggers">
    <a id="foo" href="#">Foo!</a>
</div>


jQueryの例:

$('#foo').click(function(){ alert('foo') });
$('#bar').click(function(){ alert('bar') });
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>');
$('#foo').live('click', function(){ alert('foo live()!') });
$('#bar').live('click', function(){ alert('bar live()!') });

// -> clicking #foo alerts "foo" and "foo live()"
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.
関連記事

javascript - jquery編集可能テーブル:特定のセルを編集可能にするにはどうすればよいですか?

javascript - FlashオブジェクトがフルスクリーンモードであることをJavaScriptから確認する方法

javascript - jqueryを使用して、入力テキストボックスに基づいて使用可能なオプションを変更および表示[削除/追加]

javascript - キャンバスのサイズが相対的な場合、キャンバス上の正しいマウス位置を取得しますか?

javascript - jqueryを使用して更新を表示する

javascript - JSONオブジェクトの親ノードへのアクセス

javascript - アニメーションをバックグラウンドで別の要素の背後に保持するにはどうすればよいですか?

javascript - JavaScriptのlocalstorage文字列はどこに保存されますか?

c# - ASP.NET JavaScriptを使用して、コントロールのリスト内の各コントロールのIDを取得します

javascript - Android Webkitで動作するJavaScriptデバッガー