Bind To Events Inside Dynamically Created Iframe

I need to bind to an event (say a click on an arbitrary ) inside an iframe that is created dynamically after the user performs a certain action. The code that appends

Solution 1:

This 'iframe input' does not selects input elements inside the iframe.

You can bind the event like

$('body iframe').contents().find('input').bind('click',function(e) {
    alert('bingo?');
 });

I think You can also use something like

$('body iframe').contents().find('body').delegate('input','click',function(e) {
    alert('bingo?');
 });

To detect if the iframe has been fully loaded, use the method described in this answer https://stackoverflow.com/a/5788723/344304

Add In the main/parent document:

functioniframeLoaded() {
    $('body iframe').contents().find('input').bind('click',function(e) {
        alert('bingo?');
     });
}

Add In the iframe document:

window.onload = function() {
    parent.iframeLoaded();
}

Or use

$('body iframe').load(function(){
     $('body iframe').contents().find('input').bind('click',function(e) {
            alert('bingo?');
         });
});