Question

68

Bind to events inside dynamically created iframe

rated 0 times [ 72] [ 4] / answers: 1 / hits: 15846 / 12 Years ago, mon, june 18, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patriciakiarrac

Add To Favorites

Follow

Total Points: 532

Total Questions: 100

Total Answers: 89

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

patriciakiarrac questions

1 Unable to disable keyboard date change in MUI DatePicker API

Tue, Mar 29, 22, 00:00, 2 Years ago

1 Page loader on nextjs

Wed, Jan 26, 22, 00:00, 2 Years ago

1 How to install Popper in Visual Studio 2019 locally

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Javascript - wait for async call to finish before returning from function, without the use of callbacks

Thu, Apr 23, 20, 00:00, 4 Years ago

1 How can I add loading ONLY to the clicked button in vuejs?

Sun, Aug 18, 19, 00:00, 5 Years ago

View All

answered 12 Years ago carlton · Accepted Answer

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?');

         });

});