附加IFRAME中的點擊事件

Question

基本上我有一個顯示給定頁面的IFRAME。我使用jQuery負載時的IFRAME內追加數的DIV：

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

（#portal是IFRAME）

現在我想要一個click事件處理程序附加到這些新的資料覈實。我相信因爲我正在動態創建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)); 
});