When to use $(function() {}) when registering click handlers with jQuery?

Question

What is the difference between

$(function()
{
    $(".some").click(function()
    {
        ...
    });
});

and

$(".some").click(function()
{
    ...
});

I know from here that $(function() is shorthand for $(document).ready(function(). But why are we waiting for the document to be ready? Will the function not be only called when some is clicked anyway?

Note: #2 does not work in my case.

I've taken the liberty of changing your title to match (IMO) the body. Feel free to roll back if I was mistaken. — Jeroen, Aug 17 '15 at 10:57
Please let me know the reason for downvotes. I feel this is a valid and well-formatted question. — Hele, Aug 17 '15 at 11:00
Please read the docs! https://learn.jquery.com/using-jquery-core/document-ready — Angelo Badellino, Aug 17 '15 at 11:01
Not only has to be invalid and badly-formatted to get downvotes. Perhaps someone found it would not be useful for future views. — Altay Mazlum, Aug 17 '15 at 11:02
See my answer [here](http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function/13062316#13062316) — Jashwant, Aug 17 '15 at 11:04
@AltayMazlum or i guess this basic question is already answered at SO if one google it i am sure SO links would definitely appear. — Jai, Aug 17 '15 at 11:05

score 6 · Accepted Answer · answered Aug 17 '15 at 10:57

6

The difference is that #1 waits for the DOM to fully load before running the JavaScript. The second code runs the JavaScript when it receives it which means it looks for .class elements before they have finished loading. This is why it doesn't work.

answered Aug 17 '15 at 10:57

Craicerjack

6,203
2
31
39

1

As a side note, document pseudo ready event isn't necessary if you bind event after targeted element is available in DOM – A. Wolff Aug 17 '15 at 11:14

score 3 · Answer 2 · answered Aug 17 '15 at 10:58

You need the document to be ready, i.e. all elements of the document to be available, before you can add an event listener to an element.

The reason is: consider a button, and you want an event listener (listening for the click event, for example.

When your sript runs but the button is not yet present, the attempt to attach the listener will fail. As a result, the associated function cannot be called once the button is actually clicked.

Does that answer your question?

score 0 · Answer 3 · answered Aug 17 '15 at 10:59

You use the $(function()) simply because you need the DOM to fully load.

For example you have a button and you want to add some action on click. You click the button, but nothing happened, because the button was handled prior to the DOM loading.

If you won't check that the DOM is fully loaded, some unexpected behavior might occur.

Please do not confuse between onload() to ready(), as on load executes once the page is loaded and ready() executes only when the DOCUMENT is fully ready.

score -1 · Answer 4 · answered Aug 17 '15 at 10:55

-1

$(function(){...}) triggers the function when the DOM is load, it's similar to window.onload but part of jquery lib.

you can also use $(NAMEOFFUNCTION);

It's there to be sure the event has a element to listen to.

answered Aug 17 '15 at 10:55

PRDeving

679
3
11

Not completely true, $(function(){...}) is running when the page is ready. jQuery gives different the meaning to read and load. Take a look here to get better details https://learn.jquery.com/using-jquery-core/document-ready – Angelo Badellino Aug 17 '15 at 11:00

When to use $(function() {}) when registering click handlers with jQuery?

4 Answers4