Why embedding jQuery code into $(function())?

Question

I used different jQuery plugins and in some cases they were not working properly (or not working at all) until I embedded them into $(function({ ... })).

As example the plugin:

     $('#DateTextBox').datetimepicker();

does not work, even if in the plugin web site it is used exactly in the same form. Placing it inside $(function()) it turns working perfectly:

$(function ()
        {
            $('#DateTextBox').datepicker();
        });

What the statement "$(function ())" brings exactly? I tried to search in the same jQuery web site but I did not find an answer.

Tomalak · Accepted Answer · 2011-07-13 07:14:30Z

5

What the statement "$(function ())" brings exactly?

It makes sure your code will not get executed before the page has finished loading. It is a shorthand for

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

Read: http://api.jquery.com/ready/

answered Jul 13, 2011 at 7:14

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francesco Over a year ago

Now it is much more clear why the plugin was not working! Thanks a lot.

Vivek Goel · Accepted Answer · 2011-07-13 07:15:24Z

4

$(function ()

means

$(document).ready(function() {

It wait for dom to be loaded.

answered Jul 13, 2011 at 7:15

Vivek Goel

24.4k30 gold badges119 silver badges194 bronze badges

Comments

jrharshath · Accepted Answer · 2011-07-13 07:17:08Z

4

Its not that you're using the plugins wrongly. You're probably invoking them before your document is ready, or before your scripts are loaded, or some such problem with the order of your code.

$(function() {
});

is equivalent to

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

While document.ready is the right solution for most of your situations, also ensure that:

you load jquery before all other plugins
your page is ready before your scripts start executing.

If possible, follow this recommendation from YSlow - Load all your scripts at the end of your page.

answered Jul 13, 2011 at 7:17

jrharshath

26.7k34 gold badges99 silver badges128 bronze badges

Comments

Tikhon Jelvis · Accepted Answer · 2011-07-13 07:14:43Z

2

If I remember correctly, $(function () {}) is the same as $.ready(function () {}), so the code will only get executed when the page is ready.

Look at the documentation for the ready function because it does not behave exactly like the standard load event.

answered Jul 13, 2011 at 7:14

Tikhon Jelvis

68.3k19 gold badges183 silver badges217 bronze badges

Collectives™ on Stack Overflow

Why embedding jQuery code into $(function())?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related