I came across this post about a common jQuery mistake by Michael Tran, and found it interesting. Yes, you need to load your jQuery library before you load your jQuery-specific-scripts or they would not work.
But here’s a mistake I commit often, of treating the event binding declarations as function declarations. Often I write code like this:
<script>
$("#button").click( function() {
alert("clicked!");
});
</script>And then wonder why nothing happens when I click on <input type="button" id="button" value="Click me!">. Well, that is because the $("#button").click(…); code never gets executed!
Executed? Exactly. As I said it’s not a function. The function is already defined as function() {…}, right? We need to execute the jQuery event binding. When? As soon as the document is ready. How? Nine ways to skin the cat, three (as far as I know) to tackle this problem.
- In the
bodytag
Simply put,<script> function loadingRoutine() { $("#button").click( function() { alert("clicked!"); }); } </script> <body onLoad="loadingRoutine();">But this means contaminating your markup with behavioral code. I, never!
- Using a jQuery event
The onLoad event has a different name in jQuery:$(document).ready();. You use it thus:<script> $(document).ready( function() { $("#button").click( function() { alert("clicked!"); }); }); </script>This way you don’t have to put any javascript in your
bodytag.You can also use
jQuery(document).ready(…);instead, but$(…is shorter and faster, innit?What really happens here is that the moment the HTML document is ready the $(document).ready(); event is triggered, much like the body’s onLoad event, and it binds all your jQuery behaviours to the events as you wanted.
- jQuery shortcut
It’s the same$(document).ready();event, but this time it’s way shorter, cuter and faster. It is$(…);. The usage:<script> $( function() { $("#button").click( function() { alert("clicked!"); }); }); </script>
There’s another way to call the $(document).ready(…); event: $().ready();, but the jQuery documentation advises against it. And who needs $().ready(); when you have $();?
