Question

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:

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

(#portal is the IFRAME)

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 on() function, but I having trouble doing this. I have tried:

$('#portal').on('click', '.overlay', function(){
    alert("Test");
});

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.

Answer 1

Change $('#portal').on(..) to $('#portal').contents().find('body').on(..)

$('#portal').contents().find('body').on('click', '.overlay', function(){
    alert("Test");
});