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

Question

我需要绑定到在用户执行特定操作后动态创建的iframe内的事件(比如说click任意<input>).在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之内.

该src的iframe指向同一个域,很明显.

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

Answer 1

这'iframe input'不会选择input内部的元素iframe.

你可以像这样绑定事件

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

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

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

要检测iframe是否已完全加载,请使用此答案中描述的方法 /sf/answers/405210641/

添加在主/父文档中:

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?');
         });
});