Quickly understanding the jQuery Document Ready – $(document).ready() method

Quickly understanding the jQuery Document Ready – $(document).ready() method

The jQuery Document Ready makes sure the page DOM is ready for the jQuery codes to execute. Remember to put all your jQuery Codes inside it.

$(document).ready(function() {
    alert('DOM is Ready');
});

We can also use the shorthand $() for $(document).ready():

// Shorthand for $( document ).ready()
$(function() {
    alert('DOM is Ready');
});

Example of a Button Click

In this example I will show how to place a button click event in jQuery. I will place this event inside $(document).ready() method.

$(document).ready(function(){
    $("button").click(function(){
       alert('Button is Clicked');
    });
});

Note – In the above code If you do not place the button click event inside the document ready function then your code will not execute.

Therefore always place all your codes inside jQuery Document Ready function.

The links of demo and source codes are below:

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.