Question

我正在尝试将blur事件绑定到页面中的所有“input”元素。它有多个输入元素，甚至在“iframe”中也有一些输入元素。

我能够绑定iframe之外但不在内部的模糊事件。

以下是我尝试的一些代码：

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

$('body,iframe').children().find('input').on('blur',function(e){
   alert('blur');
});

HTML结构

<html>
    <body>
        <div id = abc> <!--start of abc div -->
            <form>
                <table>
                    <tr>
                        <input name="hello"/>  <!--  able to bind event to this input -->
                    </tr>
                </table>
            </form> 
        </div> // end of abc div

        <div id="pqr"> // start of pqr div
            <iframe name="e1menuAppIframe">  <!-- iframe element (Does have more properties) -->
                <html>
                    <body>
                        <div id="abc">
                            <form>
                                 <table>
                                     <tr>
                                         <input name="hello"/>      <!--not able to bind event to this input -->
                                     </tr>
                                 </table>
                             </form>
                         <!-- more forms -->
                    </body>
                </html>
            </iframe>
        </div>    <!-- end of pqr div -->
    </body>
</html>

两者都不适用于iframe中的元素。

是否存在绑定到页面内所有输入元素的通用解决方案，尽管有iframe。

还有一些请求会将动态iframe元素加载到页面中，并且委托函数不会将模糊事件绑定到新添加的iframe。

Answer 1

你需要引用那个iframe里面的document对象，你不能只在iframe中使用jQuery进行搜索。例如

$("iframe").contents().find('input').on('blur', function() {
  console.log(this.name);
});

基本上问题是window和iframe将有单独的上下文和文档，你不能简单地从一个遍历到另一个，你需要选择其中一个作为上下文

Answer 2

我发现以下代码适用于我的动态iframe，但这仅适用于第一级iframe。在我的一个页面中，iframe内部有一个iframe用于那些没有绑定的输入元素..

$('body iframe').load(function(){
    $("body iframe").contents().find('input').on('blur', function() {
                onblur(this); 
        });
    });

JQuery无法将blur事件绑定到页面中的所有<input />元素

2 个答案: