モーダルビューを表示してイベントをバインドするベストプラクティスは何ですか？非常に一般的なシナリオで

Question

は、私は（Facebox経由）モーダルダイアログを開き、「追加」ボタンでHTMLページを持っており、それに表示されるリストから項目を選択するようにユーザーに要求します。 モーダルダイアログは、そのHTMLスニペットをサーバーから非同期的に取得します。私はこのスニペットをアプリケーションの多くの部分で再利用できるようにしたいので、Faceboxを使ってロードすることを想定してはいけません。ユーザーがアイテムを選択するたびにitem-selectedイベントをトリガーすることだけです。しかし、スニペットは非同期に読み込まれるため、$(document).readyは使用できません。それは、私はこのようなイベントをトリガすることはできません、次のとおりです。

$(document).ready(function() { 
    $(".item").click(function() { 
    $(".items-modal-dialog").trigger("item-selected", this); 
    }); 
}); 

また、私は本当に囲むDOM要素を識別するためにitems-modal-dialogクラスを使用して好きではありません。

私はこれにはいくつかの解決策を思い付いた、と私は、これは非常に共通の問題だと思うので、私は、私が行方不明ですいくつかの優れたパターンがあるかどうかを知りたいです。

1. Faceboxとスニペットをロードして、イベントをバインドするJavaScript関数を作成
2. （私はこれは悪い習慣だと思う）ので、私はスニペットのDOMがロードされていることを確信しているすべてのHTMLの後にスクリプトを置きます。このようにして私はFaceboxを使用していると想定し、作成するモーダルダイアログのあらゆる種類の関数を作成する必要があります。私が見る唯一の肯定的な側面は、items-modal-dialog DIVをプログラムで作成できるため、クラスを識別するためにクラスを使用する必要はありません。
3. jQuery liveを使用してイベントをバインドします。
4. iframeを使用し、$(document).readyを使用しています。

ご意見をいただければ幸いです。

Answer 1

jQueryのライブまたは委任機能を使用すると、私の意見では最良の解決策になります。