16

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.

bububaba
  • 2,840
  • 6
  • 25
  • 29

1 Answers1

17

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?');
         });
});
Community
  • 1
  • 1
Prasenjit Kumar Nag
  • 13,391
  • 3
  • 45
  • 57
  • Yes, but `on()` was introduced in 1.7. How can I do it in 1.6? – bububaba Jun 18 '12 at 17:41
  • Updated code, that should work if you dont have input elements dynamically added to the iframe. – Prasenjit Kumar Nag Jun 18 '12 at 17:42
  • Thanks. How can I ensure the above `$("body iframe").contents()` is run after the iframe is fully loaded? Or don't I need to make sure? – bububaba Jun 18 '12 at 17:45
  • Thanks again. Doesn't seem to be working, but I'm not sure why exactly. I'm still investigating. – bububaba Jun 18 '12 at 18:13
  • I'll assume this works, but it was very tedious to find out why it wouldn't work in my case. I managed to work around the problem by taking a different approach to the problem altogether. Thanks a lot @Joy – bububaba Jun 18 '12 at 20:50
  • The last one (using load() and contents().find().click()) worked for me, thanks for the idea. Took a while before I realised I had to wait for the document in the iframe to load. – d4kris Mar 13 '13 at 07:22
  • Great answer thanks. I got it working- but after setting the load callback - I had to actually call load on my iframes. – ryan2johnson9 Feb 02 '15 at 07:07