2

我有一个棘手的情况 - 任何帮助将不胜感激。

我在 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');
    });
4

1 回答 1

1

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

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

我通常在处理动态创建的内容时这样做，比如模态框和 iframe 以保存状态，并避免可怕的双重绑定混乱。

于 2013-02-20T08:32:41.767 回答