動的要素の読み込み時のjQuery

Question

ページ上の一部のコンテナに動的に追加される要素の条件付き操作を試行していますが、イベントがありません。私は簡単に

$('#container').on('click', '.sub-element', function() { ... }); 

を使用して、すべての新しい要素のためのクリック機能にイベントハンドラをバインドでき

<div id="container"></div> 

しかし、私がためにに結合しない：

は、私がコンテナを持っていると言います要素が#containerに追加されたときに「ワンタイム」フックを取得します。私はreadyとloadにバインドしようとしています。これを行う方法はありますか、私の問題の別の解決策を考えなければなりませんか？

This fiddle contains my non-working example。

Answer 1

あなたはjQueryのイベントハンドラによって、ピックアップすることができ、新たに追加されたDOM要素にカスタムイベントをトリガすることができます：ここで

//bind to our custom event for the `.sub-element` elements 
$('#container').on('custom-update', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}); 

//append a new element to the container, 
//then select it, based on the knowledge that it is the last child of the container element, 
//and then trigger our custom event on the element 
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update'); 

はデモです：http://jsfiddle.net/ggHh7/4/

この方法は、あなたがすることができますさまざまな方法で動的コンテンツをロードしても、何かをグローバルに実行します。

更新

私はブラウザのサポートのわからないんだけど（私はIE8を仮定しますと古いがこれをサポートしていない）が、あなたはDOM要素が追加されたときに検出するDOMNodeInserted突然変異イベントを使用することができます。

ここで

$('#container').on('DOMNodeInserted', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}) 

$('#container').append('<div class="sub-element">No worky!</div>'); 

デモです：http://jsfiddle.net/ggHh7/7/

UPDATE

THIのための新しいAPIがありますこの時点ではDOMNodeInsertedが償却されます。私はそれに見ていないが、それはMutationOvserverと呼ばれています：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

上記の答えを読んだ後、私は今、成功し、これを使用します。

$('body').on({ 
    DOMNodeInserted : function(){ 
     alert('I have been added dynamically'); 
    }, 
    click : function(){ 
     alert('I was clicked'); 
    }, 
    '.dynamicElements' 
}); 

それらがロードされているとして今、すべての私のdynamicElementsがものを行うことができ、利用します素晴らしい.on()イベントマップ。