What is the difference between these jQuery ready functions?
JqueryJquery Problem Overview
what is difference between
$(function(){
});
and
$(document).ready(function() {
});
Jquery Solutions
Solution 1 - Jquery
> 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 );
}
Solution 2 - Jquery
} 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.
Solution 3 - Jquery
Both are equivalent, the first is a shorthand form.
Solution 4 - Jquery
$(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.
Solution 5 - Jquery
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.
Solution 6 - Jquery
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.
Solution 7 - Jquery
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.
Solution 8 - Jquery
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
});
Solution 9 - Jquery
I use $(function() {}); because it's shorter. As far as I know there is no difference between the two ways of doing it.
Solution 10 - Jquery
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