document.ready and iframes

Question

My page loads an iframe. The iframe contains a small markup, including " Click "

I have a js file, included it controls a click-event for the buton. Currently the JS file is included, in the small page, which my iframe loads.

I want to include my javascript library on the containing page level, not in the page which the iframe loads. So , I moved it. Those of you who know your stuff, will not be surprised to hear that when I did this, the click() event stopped firing.

                    $(document).ready(function(){

                          $('#filter_button').click(function(){
                                    //operations
                            });

                    });

I loosely understand, that it is because the .ready function is traversing the DOM before the iframe loads... but I don't know what to do about it. Any help?

Answer 1

If you want to make sure that all content is loaded, images, iframes etc. (not just the DOM being ready) before you run your code, you can make use of jQuery's .load() instead of $(document).ready(function(){});:

$(window).load(function () {
  // run code
});

Answer 2

Try the jQuery load() method with a callback to wire up the events on your loaded page after it has finished loading.

Replacing path_to_page.html with your current iframe url:

$(document).ready(function(){
    $('#loadedContent').load('path_to_page.html', function() {
        $('#filter_button').click(function(){ 
        //operations 
        }); 
    });
});

Replace your iframe with this:

<div id="loadedContent"></div>