JavaScript not working on external file

When I use this code inside my HTML document it's working:

$('a.tocenter[href*=#]').click( function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({ scrollTop: targetOffset - ( $(window).height() - $target.outerHeight(true) ) / 2 }, 1000);
    return false;}
    }
});

If I try to put this code inside an external JavaScript file and then link it with:

<script src="js/main.js"></script>

It's not working, to let it work I had to wrap it inside:

$( window ).load(function() {
    ...
});

If I do this it works.

I'm a total newbie in JavaScript/jQuery, is this normal or am I doing something wrong? Why is it behaving like that? Is it a good practice to do that?

The only purpose of having it in an external file is for keeping the code clean and understandable.

Solution

You're attaching an event handler to an element using .click(), so it needs to be there at this point.

This can be guaranteed if you check for the page ready:

$(function() {
    // your code
});

or window load:

$(window).load(function() {
    // your code
});

, or if you keep the script in the page, at its end:

    <script type="text/javascript">
        // your code
    </script>
</body>

Another way is to use delegation:

$(selector_for_element_that_will_surely_be_there).on(event, selector_for_element_receiving_the_event, function() {
    // your code
});

// ie:
$(document).on('click', 'a.tocenter[href*=#]', function() {
    // your code
});

Have a look about it: http://api.jquery.com/on/