ページコンテンツがAJAXでロードされた後、JavaScriptをロードします

Question

Ajax（およびJQuery、およびCoffeescript）を使用して、作成している新しいWebサイトにページをロードしています。ナビゲーションメニューには、jQuery関数を使用します load このようなページ（すなわち、コンテンツ）の一部のみをロードするには（ /page1):

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

  false

これに関する問題は、私がjavaScriptコードを持っていることです page1 （または、より正確には、テンプレートファイルで）サイトのグローバルです（Rails 3.1を使用しているため、アセットパイプラインのため）。このコードは、イベントにいくつかのアクションをバインドします（これは正しい専門用語ですか？） page2. 。しかし、このスクリプトは最初にロードされたページで実行されるため（簡単になる可能性があります page1）、これらのアクションを要素にバインドするスクリプトは、 page1, 、したがって、彼らが実際にそれらを要素するDOM要素 したほうがいい に縛られます（in page2）触れられません。

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

私はページを読み込むより一般的な方法があるので、以前のアプローチには行きません。 <a> タグ href 属性）、およびページのロードに特別なケースを導入するだけで、すべてを突き止めます。後者の解決策は私が信じているかなり良いものですが、私は置くのは嫌いです <script>私が取得しているページのコンテンツにタグを付けます。私はコンテンツを行動などから分離するのが好きで、これが少し混ざり合っているかもしれないと感じています。

ですから、私がここで本当に知りたいのは、この問題を解決する良い方法であるものです。誰かがこれを行う方法を知っているなら、私はどんな提案を歓迎します。

Answer 1

JQueryのものを調べたいと思うかもしれません live() イベントバインディング。

結びついたイベント live() 遡及的に追加されたDOM要素にも適用されているため、問題が解決するはずです。

編集： 正確には、 live() に結合します $(document) そして、チェックします target DOMを介してずっと泡立ったイベントの属性は、イベントコールバックをバインドした後に要素が追加されてもバインディングが機能する理由です。

例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.