動的に作成された別の要素内の動的に作成された要素にイベントをバインドする方法はありますか？静的な祖先を持って、動的に作成された要素に

Question

結合事象this answerに示されているように、jQueryのを使用してかなり簡単です：

$(staticAncestors).on(eventName, dynamicChild, function() {}); 

しかしdynamicChildはdynamicAncestorのあるものか？

$(dynamicAncestors).on(eventName, dynamicChild, function() {}); 

Answer 1

onを使用して、あなたは最寄りの静的親要素にバインドする必要があります。次の仕事をする方法はあります。いくつかのケースでは、それはbodyことがあります、それはあなたのDOMを見ることなく、より徹底的にあなたの質問に答えることは困難ですのでbodyにすべてのイベントをバインド

$('body').on(eventName, 'dynamic-element', function() { }); 

は、しかし、一般的に悪い習慣です。しかし、最も近い静的な親にバインドすることは、あなたが達成しようとしているものに対して機能します。

Answer 2

dynamicAncestorsがセレクタの場合、なしです。要素は、イベントハンドラをバインドするときにはでなければなりません。これは、イベント委任の重要なポイントです。（動的に生成された）子孫のイベントをリスンするためのミドルウェアとして静的な親を使用します。おそらく次の構文を探しているでしょう：

$('staticParentOfdynamicAncestors').on(
    eventName, 
    'dynamicAncestors dynmaicChild', 
    function() {} 
); 

チェックUnderstanding Event Delegation