jQuery's document ready initialization

Posted February 20th, 2009 in Javascript

jQuery has a $(document).ready() function which is invoked after the DOM is loaded and before the page contents are loaded. It means you don't have to have body onload events and can completely remove all Javascript from your HTML by attaching events to elements independent of the HTML after the DOM has loaded.

I'm always forgetting the correct number of brackets and parentheses to put in when setting up my jQuery files for websites when I first set them up, so this brief post is a quick reference so I can easily locate the code and copy and paste it into my default file.

The basic syntax, which won't actually do anything, looks like this:

$(document).ready(function() {
  // initialization code goes here
});

This can be in the <script> section of your HTML file but it is better to put it into an external Javascript file which you would reference like the following example, and which would contain all your Javascript functions:

<script language="javascript" src="/path/to/my.js">
</script>

You are free to put whatever you want to where I've put the comment line "// initialization code goes here", but for readabilty if you have a lot of stuff to initialize then you are probably better to call various other init functions to keep your code nice and clean. For example:

$(document).ready(function(){
   
    init_some_function();
    init_some_other_function();
    init_another_function();
   
});

Those other functions might then initialize various other aspects of your code.

Share or Bookmark

Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.

Subscribe or Follow

Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

Comments