<script>...</script> for $("").focusout function in <body>-Tag but not in <head>-Tag

<script>...</script> for $("").focusout function in <body>-Tag but not in <head>-Tag

Hi I tried the focusout-example ( http://api.jquery.com/focusout/ ) and it worked fine. My question would be why doesnt it work when I set the <script>...</script> in the head-Tag? Gotta be easy to answer but even when I set the code into the $(document).ready(function() {} it doesnt work. Im afraid my code will be horrible to read when I place the script-Tag after several inputs...

Heres the original code from the example - works:

  1. <!DOCTYPE html>
    <html>
    <head>
      <style>
    .inputs { float: left; margin-right: 1em; }
    .inputs p { margin-top: 0; }
    </style>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    </head>
    <body>
    <div class="inputs">
      <p>
        <input type="text" /><br />
        <input type="text" />
      </p>
      <p>
        <input type="password" />
      </p>
    </div>
    <div id="fo">focusout fire</div>
    <div id="b">blur fire</div>
    <script type="text/javascript">
        var fo = 0, b = 0;
        $("p").focusout(function() {
              fo++;
              $("#fo").text("focusout fired: " + fo + "x");
        });
       
       
    </script>
    </body>
    </html>






























And heres the modified code which does not work - script has just moved:
  1. <!DOCTYPE html>
    <html>
    <head>
      <style>
    .inputs { float: left; margin-right: 1em; }
    .inputs p { margin-top: 0; }
    </style>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var fo = 0, b = 0;
        $("p").focusout(function() {
              fo++;
              $("#fo").text("focusout fired: " + fo + "x");
        });
    }
       
    </script>

    </head>
    <body>
    <div class="inputs">
      <p>
        <input type="text" /><br />
        <input type="text" />
      </p>
      <p>
        <input type="password" />
      </p>
    </div>
    <div id="fo">focusout fire</div>
    <div id="b">blur fire</div>
    </body>
    </html>

































Hope so can help me...