Question

I need to bind to an event (say a click on an arbitrary <input>) inside an iframe that is created dynamically after the user performs a certain action. The code that appends the iframe AND the code inside the iframe is not mine and I cannot change it in any way (this is a CMS admin panel).

How can I listen to the events using jQuery 1.6 (again, this is not my choice, I’m stuck with it). I thought delegate() might be what I want:

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

But the above does not alert when an input is clicked. The below, however, works as expected:

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

But this is outside the iframe.

The src of iframe points to the same domain, obviously.

Any help or just a prod in the right direction is greatly appreciated.

Answer 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:

function iframeLoaded() {
    $('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?');
         });
});