IFRAMEのクリックイベントを添付します

Question

基本的には、特定のページを表示するIFRAMEがあります。私は負荷にIFRAME内div要素の数を追加するjQueryのを使用しています：

$('#portal').load(function(){ 
    $('#portal').contents().find('.callout').append('<div class="overlay">Test</div>'); 
}); 

（#portalがIFRAMEである）

は今、私はこれらの新しいdiv要素にクリックイベントハンドラを添付したいです。私はDIVを動的に作成しているので、on()関数を使用する必要がありますが、これを行うのには問題があります。私が試してみました：

$('#portal').on('click', '.overlay', function(){ 
    alert("Test"); 
}); 

コードの上記の二つのスニペットは、親ページ上でアクセス可能であるJSファイルであり、すなわちIFRAME自体はJSファイルを参照していません。

Answer 1

変更$('#portal').on(..)$('#portal').contents().find('body').on(..)へ

$('#portal').contents().find('body').on('click', '.overlay', function(){ 
    alert("Test"); 
}); 

Answer 2

のiFrameが、その後、クロスブラウザのソリューションのためにこれを試して固有の名前を持っていることを確認してください：

$('#portal').load(function(){ 
    $('<div class="overlay">Test</div>') 
     .click(function(){ 
      alert("Test"); 
     }).appendTo(window.frames[this.name].document.body)); 
});