Running javascript after page load

Question

I currently have a javascript file that I call on my browse page, in which I get information about the data. At the same time, I have this part of javascript that shows the menu bar after clicking the image. This script is run before the page is fully loaded or something because it does not work. How can I do part of my javascript to take action after all other scripts are complete and the page is loaded? this is what i tried but didn't work correctly

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 can use $(window).on("load") instead of $(document).ready if you want to wait for all elements to load in this case:

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