Question

我有一个棘手的场景 - 任何帮助都会受到赞赏。

我在iframe中有一个包含子页面的父页面。这是示例html：

对于父页面：

<html>
    <body>
        <a id="banana">Banana</a>

        <iframe src="ChildPage.html" />
    </body>
</html>

然后是ChildPage.html：

<html>
    <body>
        <form>
            <input type="submit" value="Submit" />
        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
           $('#banana', top.document).click(function() {
              alert('hello world');
           });
        </script>
    </body>
</html>

观察单击提交按钮时会发生什么 - 单击处理程序绑定两次到Banana链接并显示两个警告对话框。

在这种情况下，防止多重绑定的常用技术不起作用：

// This doesn't work either
var clickHandler = function() {
    alert('hello world');
};

$('#banana', top.document).unbind(clickHandler).bind(clickHandler);

那是因为当我们提交iframe时，clickHandler被视为一个新对象，与之前的clickHandler不同。

有趣的是，命名空间也不起作用 - 命名空间上下文似乎位于创建命名空间的窗口内，而不是绑定到绑定的元素。

// This still doesn't work either
$('#banana', top.document)
    .unbind('click.myns')
    .bind('click.myns', function() {
        alert('hello world');
    });

Answer 1

您可以向要尝试将事件绑定到的元素添加属性，然后在事件绑定上检查该属性。

$("#banana:not(.initialized)", top.document).bind();

我经常在搞乱动态创建的内容时这样做，比如模态和iframe来保存状态，并避免可怕的双重绑定。

当从iFrame内部绑定到父级时，避免在Jquery中重复绑定

1 个答案: