はJQuery：動的に作成された要素

Question

は、次の点を考慮するためにイベントをバインドするための最良の方法：

var template = '<div class="dynamic">Some markup</div>' 
    , $template = $(template); 
$template.on('click.namespace.data-api', function(e) { doStuff() }); 
$('div.#parent').append($template); 

私にはイベントが接続されているので、これは、ノードにイベントをバインドするための最も最適な方法であると思われますすでにjQueryオブジェクトとして導入されているノード。しかし、私は実際のクリックイベント中にこれがどのように働くのか分かりません。 jQueryはイベントがjQueryオブジェクトにバインドされているので、すぐにこの要素を見つけることができますか？ 。

var template = '<div class="dynamic">Some markup</div>' 
    , $template = $(template); 
$('div.#parent').append($template); 
$('div.#parent').on('click.namespace.data-api', 'div.dynamic', function(e) { doStuff() }); 

Answer 1

jQueryのが唯一の彼らはしている正確なコールに固執オブジェクトとしてすぐにその呼び出しは、もはやjQueryオブジェクトとして関連しているオブジェクトを行われているように：またはそれはより最適なようなものを使用してイベントをバインドすることです。

Click Delegationで表示しているように、ハンドラが親ノードにフックされ、委任された要素/クラスのクリックを監視するため、いつでも作成される要素の動的な側面について心配する必要はありません。

私に直接委任方法を使用してクリック委任の2番目のバージョンを書くことは、はるかに読みやすく、将来再読み込みに戻るときにはっきりします。

Answer 2

イベントを特定の要素にバインドする代わりに、代わりにドキュメントにバインドすることができます。

`$('.dynamic').click()` can be replaced with `$(document).on('click', '.dynamic', function())`