hide - Understanding jQuery

Only variables and events should be initialized inside $(document).ready, not functions.
Though, this is not a rule! However, if you do that, certain things will occur that will prevent
you from using the function in the global scope. In other words, function definitions are limited
to the scope they are defined in, just like variables. We know that a scope is any place in
your JavaScript program delimited by the { ... } brackets.
I have received a question from one of my newsletters subscribers about defining a function
inside $(document).ready(). It is an event that takes place after all DOM (all HTML elements)
are physically loaded into the web page... so essentially what happens is that a function is defined
inside the anonymous function that runs when this DOM event occurs. The function is
now limited to the scope of the anonymous function attached to that event. Let’s take a look:
$(document).ready(function()
{
function a() { alert(‘hello’); }
a(); // here it works, because it was defined in the same scope
}
// But here it produces an error -
// The function a() cannot be called outside of the scope it is defined in.
a(); // error: undefined function
In order to remedy this problem, we stick to defining all functions outside of the event This
means they will become available to call from the entire program, even within $(document).
ready... as well as throughout the whole scope of the program, the global scope.
function a() { alert(‘hello’); } // let’s define the function in the global scope, instead.
$(document).ready(function()
{
a(); // here it works
}
a(); // the function now works here as well
20