running javascript after page has been loaded [duplicate]

Question

I currently have a javascript file that i call in my view page in which i get my data information to display. At the same time i have this piece of javascript that shows a menu bar once the image has been clicked. This scripted is being ran before the page is loaded completely or something because it is not working. How can i make a piece of my javascript take action after all other scripts have completed running and page is loaded? this is what i tried but not working right

Javascript

(function ($) {

.... lines to load view page with data

$(document).ready(function () {
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });
});

})(jQuery);

Answer 1

You could use $(window).on("load") instead of $(document).ready if you want to wait until all the elements have loaded in that case:

$(window).on("load", function(){
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });    
});