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

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>