Attach click events in an IFRAME
<p>Basically I have an IFRAME that displays a given page. I am using jQuery to append a number of DIVs within the IFRAME upon load:</p>

<pre><code>$('#portal').load(function(){
    $('#portal').contents().find('.callout').append('&lt;div class="overlay"&gt;Test&lt;/div&gt;');
});
</code></pre>

<p>(#portal is the IFRAME)</p>

<p>Now I want to attach a click event handler to these new DIVs. I believe since I am creating the DIVs dynamically, I need to use the <code>on()</code> function, but I having trouble doing this. I have tried:</p>

<pre><code>$('#portal').on('click', '.overlay', function(){
    alert("Test");
});
</code></pre>

<p>The above two snippets of code are in a JS file that is accessible only on the parent page, i.e. the IFRAME itself does not reference the JS file.</p>
