So, simple question, is it possible to write jQuery code without writing $(document).ready(function() in every .js file? Js file is included like that <script src="app/jsCode/test.js"></script>? Thank you.

So, simple question, is it possible to write jQuery code without writing $(document).ready(function() in every .js file? Js file is included like that <script src="app/jsCode/test.js"></script>? Thank you.

• javascript
• jquery

• If you don't want the code in your script to be executed immediately, don't define it as global code. Instead, place it in a function, and then invoke that function on DOM ready... – Šime Vidas Commented Dec 3, 2011 at 0:49
• How many js files do you really have, and the correct answer should be as few as humanly possible. If you have a lot of files you should bine them, also there is a great function called copy and paste, that is available in most editors and operating systems, or just use a template file if you create a lot of different sites. – adeneo Commented Dec 3, 2011 at 1:19

6 Answers 6

You only need that for code that should only be executed when the DOM is fully loaded. And even then, you can use the shortcut shorthand:

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

The ONLY Javascript code that needs to be inside a $(document).ready() block is Javascript code that attempts to immediately access the DOM of the page. If you have lots of other Javascript (like utility functions, libraries, etc...) that are simply called by other Javascript, those do not have to be in a $(document).ready() block as they don't try to access the DOM when first loaded.

In my apps/pages, I tend to call a few initialization functions from a $(document).ready() block and put much of the rest of my code outside any block, but whether that makes sense for you or not depends upon what you're doing and how your code is organized.

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

But, in answer to your question. All javascript that actually initiates an operation that will immediately access the DOM must be in a $(document).ready() block (or similar type of delay until the DOM is ready).

$(document).ready calls can be avoided as much as possible.

1. Move all your scripts to the bottom of the page, so the document is fully created and scripts are able to gain access to the whole document.
2. Your scripts can be categorized into: a. Libraries, such as jQuery. b. Scripts that implement functionalities on the current page. Place your scripts in the order of dependencies, and put the main application scripts at the end of the sequence. So your actual application script has access to the DOM and the dependencies.
3. Now if necessary, wrap the main scripts into the $(document).ready() call.

Normally I would do this, define a function __main__(), and put that as the ready handler at the bottom of my main script main.js.

// Define your functions
function func1() {
 // blah blah blah
}

function func2() {
 // implement blah blah blah
}

function __main__() {
 // do main intializations
 func1(); // call func1 to initialize function point 1
 func2(); // call func2 to init other stuff
 // blah blah blah
}

$(document).ready(__main__);

Now you have a cleaner structure of scripts.

The purpose of that "wrapper" is to allow the browser to actually create all DOM elements so that when jQuery selectors are subsequently evaluated they find the nodes that they need to operate upon.

This means that no, it isn't possible, unless you are willing to take a gamble on your jQuery not working -- and unless you do something that does not depend on the DOM (which is unlikely).

You can shorten the wrapper to

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

but that doesn't really change anything.

Yes.

You can use one central call to .ready() to initialise your required code:

$().ready(function(){
   my_class.init();
   my_class2.init();
});

Your classes can be in separate external files.

You could write:

$(function(){
    // do stuff
});

However, I'm not sure you understand what this idiom is for. This says "when the document is fully loaded and all DOM nodes are available, run this code."

If you are writing some JS code that does not depend on selecting DOM nodes or does not need the document to be fully loaded, you can and usually should put that code outside this block. For example, if you are declaring classes and object prototypes. But if you need to register event handlers or evaluate selectors, it's best to wait until the DOM is finished loading.