CODEWITHSUNDEEP
jquery
Starx
Starx

Reputation: 79069

What is the difference between these jQuery ready functions?

what is difference between

$(function(){

});

and 

$(document).ready(function() { 

});

Upvotes: 79

Views: 12617

Answers (10)

pradip garala
pradip garala

Reputation: 522

jQuery recommends to use $( fn ).

$(document).ready(function() {}); or $(document).on("ready", fn); will cause the function to be called when the document is ready, but only if it is attached before the browser fires its own DOMContentLoaded event. That makes it unreliable for many uses, particularly ones where jQuery or its plugins are loaded asynchronously after page load.

For more info, please look into jquery-migrate

Upvotes: 0

Will Lanni
Will Lanni

Reputation: 921

We have run into situations where IE9 does not run functions within $(function() {}); in the same manner or timing as $(document).ready(function(){});

The issue reared its head for us specifically in reading information out of a query string and processing and displaying that information on the screen, or using it to process a form. IE9 would process the information once it was cached with $(function(), and a user refreshed the page. But on first run, nothing worked right. However, once we switching from $(function(){}); to $(document).ready(), the issue was fixed. We changed NOTHING else.

I so look forward to the day I don't have to test for IE9 and lower.

Upvotes: 6

lonesomeday
lonesomeday

Reputation: 238115

The two are exactly equivalent: use whichever form you like.

That said, I personally always use the expanded form $(document).ready(function(){}); for the simple reason that it is completely obvious what the code is doing. The approximate idea is that of "self-documenting code". Anyone coming to the code later on will immediately see that the code is to be run on the document's ready event. With the short-hand form, you have to rely upon the reader of your code understanding the meaning.

Upvotes: 7

foliveira
foliveira

Reputation: 626

I suggest you read this. As you can see

All three of the following syntaxes are equivalent:

$(document).ready(handler)

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

$(handler)

So it's up to you and to what you prefer.

Upvotes: 7

Raynos
Raynos

Reputation: 169551

} else if (jQuery.isFunction(selector)) {
    return rootjQuery.ready(selector);
}

From the source

Calling $(document).ready(selector) saves a few if statements.

Although jQuery does cache $(document) internally that might make $(f) faster.

Benchmarked

Upvotes: 15

user492203
user492203

Reputation:

They're effectively the same. No difference.

This is the native way.

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

And this is a shorthand for the previous.

$(function() {
    // code
});

jQuery source code

Upvotes: 5

BrokenGlass
BrokenGlass

Reputation: 161012

Both are equivalent, the first is a shorthand form.

Upvotes: 10

Richard Dalton
Richard Dalton

Reputation: 35803

I use $(function() {}); because it's shorter. As far as I know there is no difference between the two ways of doing it.

Upvotes: 2

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11577

$(function(){}) is a short cut for the dom ready

A function passed as an argument to the jQuery constructor is bound to the document ready event.

Upvotes: 7

SLaks
SLaks

Reputation: 888293

Nothing whatsoever.

This function behaves just like $(document).ready(), in that it should be used to wrap other $()

You can see this in the source code:

rootjQuery = jQuery(document);

...

} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

Upvotes: 58

Related Questions