Question

基本上我有一个显示给定页面的IFRAME。我在加载时使用jQuery在IFRAME中附加了许多DIV：

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

（＃portal是IFRAME）

现在我想将click事件处理程序附加到这些新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));
});

在IFRAME中附加单击事件

2 个答案: