Avoiding repeat binding in Jquery, when binding from inside iFrame to parent
<p>I have a tricky scenario - any help would be appreciated.</p>

<p>I have a parent page with a child page inside an iframe. Here is example html:</p>

<p>For the parent page:</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;
        &lt;a id="banana"&gt;Banana&lt;/a&gt;

        &lt;iframe src="ChildPage.html" /&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And then for ChildPage.html:</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;
        &lt;form&gt;
            &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;

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

<p>Observe what happens when the submit button is clicked - the click handler is bound twice to the Banana link and two alert dialogs appear.</p>

<p>In this case, the usual technique of preventing multiple bindings doesn't work:</p>

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

$('#banana', top.document).unbind(clickHandler).bind(clickHandler);
</code></pre>

<p>That's because when we submit the iframe, clickHandler is treated as a new object, different from the previous clickHandler.</p>

<p>Interestingly, namespaces also don't work - the namespace context seems to be within the window that created the namespace, rather than being tied to the element that it is bound to.</p>

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