Placement of jQuery script issue - not working from external file

Placement of jQuery script issue - not working from external file

Hello,
I have a script that restricts user input and this works.
Problem area.
I have a external file that i keep the js in and for some reason the script wont work from the external file.. I also noticed that this particular script needs to be below the input field in order for it to work.
I like to keep the script in there respective files can this not be done with this particular jQuery script?

side note the jQuery test which is lso found in the external file, work
  1. <!DOCTYPE html>
    <html>
        <head>
            <title> Testing field controls  </title>
            <script src="http://code.jquery.com/jquery-latest.js"> </script>
            <script src="testjs.js" type="text/javascript"></script>
            <script>
                if (jQuery) { alert('jQuery is loaded!');  }         
            </script>
        </head>
    <body>   
        Firstname: <br />
        <input type="text"  name="fname" id="fname" /> <br /><br />











  2. <!-- if you put the code here it works -->   
        </body>
    </html>


 testjs.js
  1.     $('#fname').bind('keypress', function (event) {
            var regex = new RegExp("^[a-zA-Z]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
               event.preventDefault();
               return false;
            }
        });    






  2. if (jQuery) { alert('jQuery is loaded!');  }