jQuery $( function() {} ) and $(document).ready the same?

Question

To have a working datepicker on a field, I have to put this script inside my element

$( function() {
  $( "#date_datepicker" ).datepicker( { dateFormat: "yy-mm-dd" } );
});

Removing the $( function() { makes the datepicker not work.

So does it mean that the $( function() { is the same as $(document).ready?

I'm trying to optimize my javascript codes so knowing this might help.

possible duplicate of [jQuery document ready function](http://stackoverflow.com/questions/5754192/jquery-document-ready-function) — 2540625, Oct 22 '14 at 20:34

score 43 · Accepted Answer · edited Oct 17 '13 at 16:41

43

See the extract below from http://api.jquery.com/ready/

All three of the following syntaxes are equivalent:

$(document).ready(handler)

$().ready(handler) (this is not recommended)

$(handler)

edited Oct 17 '13 at 16:41

Ry-

218,210
55
464
476

answered May 15 '12 at 07:19

Frederick Behrends

3,075
23
47

4

Thanks, I was searching in google but I think having some special characters like $ makes it hard to get the right result. – MegaNairda May 15 '12 at 07:21
1

out of curiosity why is the second one not recommended ? – Nigel Fds Jul 29 '19 at 02:55

score 14 · Answer 2 · answered May 15 '12 at 07:21

14

The .ready() method is typically used with an anonymous function:

$(document).ready(function() {
  // Handler for .ready() called.
});

Which is equivalent to calling:

$(function() {
 // Handler for .ready() called.
});

As can be read here

answered May 15 '12 at 07:21

Hans Wassink

2,529
3
30
45

score 5 · Answer 3 · answered May 15 '12 at 07:20

5

Yes, it's a shorthand version of the same thing. The $ function calls the $(document).ready function when passed a function as an argument.

If you're trying to optimise in terms of speed - both will perform pretty much equivalently, however the longer $(document).ready(handler) will be minimally faster if executed lots of times.

If you're trying to optimise in terms of file size - use a minifier.

IMO the best you can do is to 'optimise' in terms of readability and simplicity. This makes the code far easier to understand and maintain. There are tools out there to take an unoptimised version and compress and optimise for you (check out Google's closure compiler).

answered May 15 '12 at 07:20

Rich O'Kelly

41,274
9
83
114

My code contains both of the two I mentioned on top of my page. It's a good thing though that I didn't run into trouble having both of them at the top my page. I'll try to use a minifier just like you said after I'm done manually optimizing my code, reducing redundant codes such as these and other similar calls that can be combined into one function call – MegaNairda May 15 '12 at 07:32
I hope I don't run into compatibility trouble using _shorthand_ like what happen to Internet Explorer when using the ajax shorthand `$.post` – MegaNairda May 15 '12 at 07:39

score 3 · Answer 4 · answered May 15 '12 at 07:20

3

Yes, $( function() { and $(document).ready are same.

$( function() { works as a shorthand syntax but $(document).ready makes the code more readable.

answered May 15 '12 at 07:20

Prasenjit Kumar Nag

13,391
3
45
57

1

Thanks, I would also prefer the `$(document).ready` rather than the `$(function(){` . – MegaNairda May 15 '12 at 07:27

Timo Huovinen · Answer 5 · 2014-05-14T09:01:44.087

Here is a pretty safe way to run code on ready

jQuery(function($, undefined){
  // code to run onready
});

Although I personally prefer doing it like this:

(function($){ // create scope and pass specific aliased variables

    $(function($, undefined){ // attach callback to run onready
       // code to run onready
    });

})(jQuery);

This way you can make your own bundles of functionality without fear of breaking other peoples code or having your code broken by loose variable definitions. You can also call the variables that you pass along with whatever names that you want and have code that runs no on ready, for example.

(function($){ // create scope and pass specific aliased variables


    $(document).on('click', 'a[href]', function(){
       // code to run when a link is clicked
    });
    $(window).on('load',function(){
       // code to run onload
    });
    $(function($, undefined){ // attach callback to run onready
       // code to run onready
    });


})(jQuery);

Note that these are the same

$(document).bind('ready', function(){});
$(document).on('ready', function(){});
$(document).ready(function(){});
$(function(){});

And that document does not have a load event

$(document).on('load', function(){}); // will not work

score 1 · Answer 6 · edited Mar 10 '14 at 11:21

1

note that you can also find scripts like this:

jQuery(document).ready(function(){

here the $-sign is replace by jQuery to avoid conflicts with other library's

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

edited Mar 10 '14 at 11:21

Anujith

9,370
6
33
48

answered May 15 '12 at 07:25

Jeroen

1,638
3
23
48

score 0 · Answer 7 · edited Mar 10 '14 at 11:20

0

Are you using jQuerymobile? if so instead of using document ready use

$('#pageId').live('pageinit',function(){});

edited Mar 10 '14 at 11:20

Anujith

9,370
6
33
48

answered May 15 '12 at 07:24

Arun Dev

23
6

Not really, just the normal jQuery. – MegaNairda May 15 '12 at 07:26

jQuery $( function() {} ) and $(document).ready the same?

7 Answers7

Linked

Related