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>

送信ボタンがクリックされたときに何が起こるかを観察します。クリックハンドラーがバナナリンクに2回バインドされ、2つのアラートダイアログが表示されます。

この場合、複数のバインディングを防ぐ通常の手法は機能しません。

// 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 に答える