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