JavaScript not working on external file

Question

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.

Answer 1

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/