iframeから動的に作成された要素のイベントバインド

Question

私のアプリケーションでは、div要素を親div要素に動的に追加するコードを追加しました。 $('#FrameId').contents().find('#id');を使用して、定義済みのiframe div要素にアクセスできます。しかし、div要素を新しく追加しようとすると、は未定義と表示されます。なぜ新しく追加されたdiv要素にアクセスできないのですか？コードの下に使用され、私が新しく追加されたdiv要素を取得しようとすると

$('#frameId').contents().find("#id").append("<div class="sample">Some text</div>"); 

、：：

コードの下に使用される新しいdiv要素を追加するために

、

$('#frameId').contents().find(".sample").click(function(){}); 

で、クリックイベントがトリガされません.sample div要素を見つけることができないためです。

Answer 1

iframe loadイベントは、下記のサンプルをご覧ください。

、動的に作成された要素のclickイベントのために、あなたは彼らがに追加され 子孫要素からイベントを処理できるという利点があるon().

委任イベントを使用して結合「委任」を作成する必要がありますドキュメントは後で表示されます。

$('#frameId').on('load', function(){ 
    $(this).contents().find('body').on('click', '.sample', function(e){ 
     //Do some stuff 
    }); 
});