Tag: webdesign

Categories
Work

jQuery tip: all ready?

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.

  1. In the body tag
    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!

  2. 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 body tag.

    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.

  3. 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 $();?