Where to put all that jQuery JavaScript code?

Question

From the documentation I've found this example:

We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

I remember from 5 years ago, that you should NEVER ever refer to any element until it was defined. Does this rule still apply? So I would have to put all that code in the footer of my web page? Or can I put it in a separate file and import it in the footer? What's best practice?

Answer 1

The recommended way of doing this is putting all initialization code into $(document).ready, like so:

$(document).ready(function() {
   $('#foobar').click(function(event) { alert("You Clicked Me!"); });
});