When is document ready needed and when not in JQuery

Question

I am not sure when we use $(document).ready(function() { }); and when we can declare a $(function() { } without it being declared in the $(document).ready(function() { });

For example the following snippet:

<body>  
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>  
    <script type="text/javascript">  
        $(function() {  
            $("textarea").htmlarea();  
        });  
</script>

works without using the $(document).ready(function() { }); but the following:

<body>  
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>  
    <script type="text/javascript">  
    $(document).ready(function(){
        $("btn").click(function(){
            alert('Hello!!!');
        });
    });

        $(function() {  
            $("textarea").htmlarea();  
        });  
</script>

When I press the button with id="btn", it does nothing.
Am I doing this wrong?

score 6 · Answer 1 · answered Nov 09 '13 at 23:31

In the second example, assuming you actually do have a button with an id of btn somewhere, the problem is that you’re missing a # to select by ID:

// ⌄ here
$("#btn")

Calling $ with one function and calling $(document).ready with that same function are equivalent.

To answer the question of “when do I need to wait for ready”, though, the answer’s simply that you need to wait until an element exists in the DOM to be able to find it. Sometimes, that takes waiting until the entire page (though not necessarily all of its linked resources) has been downloaded and parsed into a tree; sometimes you’ve included your script at some point after the element that you need, and so you don’t have to wait at all; sometimes you use event delegation on elements that exist (a common example of which would be the entire document). You could almost say it’s up to preference.

score 2 · Answer 2 · answered Nov 09 '13 at 23:39

You should always be using the $(document).ready(function(){}) to bootstrap your application really unless there is a specific need not to use it as they will get executed once the DOM is ready to be traversed.

In your examples however your two functions do the same thing, I prefer to use $(document).ready() because it is more explicit and readable.

The reason your code is not working is because you have not used the correct selector using $("btn") will look for html elements e.g. but won't find any because it's invalid html. You should use $("#btn") to select your button. the '#' is used to find id's whilst the '.' can be used to select multiple items with a specific class attribute.

+1 for stressing the importance of putting bootstrapping code in `$(document).ready()`. — nrodic, Nov 09 '13 at 23:51

Michał Rybak · Answer 3 · 2013-11-09T23:34:22.800

1

If your button has id btn, you should use $('#btn') selector, like this:

$(document).ready(function(){
    $("#btn").click(function(){
        alert('Hello!!!');
    });
});

To the first question:

There is no difference between $(document).ready(function () { ... }) and $(function() { ... }), you can use any of those.

edited Nov 09 '13 at 23:34

answered Nov 09 '13 at 23:32

Michał Rybak

8,648
3
42
54

So `$(document).ready` is redundant? – Jim Nov 09 '13 at 23:45
It's not *redundant*, but you can use _either_ `$(document).ready(function () { ... })` _or_ `$(function() { ... })`. – Michał Rybak Nov 09 '13 at 23:52

score 0 · Answer 4 · answered Nov 09 '13 at 23:34

0

Functions declared in document.ready events get executed when the dom is ready. Other functions, (outside document.ready) is invoked when the corresponding event is fired.

answered Nov 09 '13 at 23:34

`invoked when the corresponding event is fired.` but this implies that the dom is ready right? – Jim Nov 09 '13 at 23:44

score 0 · Answer 5 · answered Nov 09 '13 at 23:37

There are two events that matter when you want things to happen "early" in a web page:

The DOM is constructed in browser memory. When this is done, $(document).ready fires.
All the resources--images, stylesheets, video, scripts, etc--have been downloaded. This is the onload event.

If you aren't fetching anything (or nothing too big) over the wire, it is quite possible that both events are all but simultaneous, and you can simply run something in the script tag at the bottom of the page to do work.

Note also that the two approaches you took are equivalent. They both are "ready" event handlers.

Having said all that, none of it is relevant to your issue. $("btn") won't resolve to anything because your selector is bad. There is no element called button. You probably meant an id of btn, in which case you want to do this $("#btn")

When is document ready needed and when not in JQuery

5 Answers5