JQuery 无法将模糊事件绑定到页面中的所有 <input> 元素答案

【问题标题】：JQuery Not able to bind blur event to all <input> elements in a pageJQuery 无法将模糊事件绑定到页面中的所有 <input> 元素
【发布时间】：2013-12-12 06:58:54
【问题描述】：

我正在尝试将模糊事件绑定到页面中的所有“输入”元素。它有多个输入元素，甚至在“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 元素加载到页面中的请求，on 和委托函数不会将模糊事件绑定到新添加的 iframe。

【问题讨论】：

如果您在浏览器上检查元素，您将在框架内看到另一个 html 和 body 标签。所以我认为这是问题所在！
Iframe 的内容是否来自其他域？换句话说，您的 iframe 是否打开了外部 URL？
不，内容仅来自同一域。当我在 firebug 中打开 iframe 时，它就像一个从 .......... 开始的新页面 DOM
你能给我们看看这里的代码吗？我也想查看 iframe 的标记。也许你在那里遗漏了一些东西。
请找到更新后的 HTML 代码结构。

标签： javascript jquery jquery-ui iframe jquery-plugins

【解决方案1】：

您需要引用该 iframe 内的 document 对象，您不能只在 iframe 中使用 jQuery 进行搜索。例如

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

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

【讨论】：

而不是给出 iframe 的名称 ie)"e1menuAppIframe" 我们可以编写一些通用选择器，因为页面中可能有多个 iframe，我的目标是为所有输入元素绑定模糊事件一个页面并基于该模糊执行一些功能
是的，你可以，$("#frame-id").contents().find("input") 应该可以解决问题
哦，我想我明白了问题所在。在您的第一个示例中，您 delegated 模糊事件，并且它们不会冒泡，因此您不能委托它们，您需要将事件直接附加到输入字段
Nikolay 我认为这绝对适用于静态 iframe，但我的页面中有动态 iframe，所以我认为事件没有绑定到页面中的新元素
不，您将无法将事件委托绑定到另一个框架的内部，因为由 iframe 元素触发的事件不会离开 iframe 上下文

【解决方案2】：

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

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

【讨论】：