绑定到动态创建的 iframe 内的事件

Question

我需要在用户执行特定操作后动态创建的 iframe 中绑定到一个事件（比如任意 <input> 上的 click）。附加 iframe 的代码和 iframe 内的代码不是我的，我无法以任何方式更改它（这是一个 CMS 管理面板）。

我怎样才能使用 jQuery 1.6 来监听事件（再次强调，这不是我的选择，我坚持使用它）。我想delegate() 可能是我想要的：

$('body').delegate('iframe input', 'click', function(e) {
    alert('bingo?');
});

但当点击输入时，上述内容不会发出警报。但是，以下内容按预期工作：

$('body').delegate('input', 'click', function(e) {
    alert('bingo?');
});

但这在 iframe 之外。

iframe 的 src 显然指向同一个域。

非常感谢任何帮助或只是对正确方向的刺激。

Answer 1

此'iframe input' 不会选择iframe 内的input 元素。

你可以像这样绑定事件

$('body iframe').contents().find('input').bind('click',function(e) {
    alert('bingo?');
 });

我认为你也可以使用类似的东西

$('body iframe').contents().find('body').delegate('input','click',function(e) {
    alert('bingo?');
 });

要检测 iframe 是否已完全加载，请使用此答案中描述的方法 https://stackoverflow.com/a/5788723/344304

在主/父文档中添加：

function iframeLoaded() {
    $('body iframe').contents().find('input').bind('click',function(e) {
        alert('bingo?');
     });
}

在 iframe 文档中添加：

window.onload = function() {
    parent.iframeLoaded();
}

或者使用

$('body iframe').load(function(){
     $('body iframe').contents().find('input').bind('click',function(e) {
            alert('bingo?');
         });
});