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/

Answer 2

It basically tells your browser to run script after all DOM nodes are ready, i.e. downloaded and rendered.

Answer 3

Try adding the script tag to the bottom of your html page instead of in the header. That is done for performance reasons that way your page appears as fast as possible and the extra javascript stuff is loaded afterwards.

You can read more about this at : How does the location of a script tag in a page affect a JavaScript function that is defined in it?

Answer 4

Wrap the content inside your file in

$(function(){
//js goes here
});

or put the reference to the file at the bottom of your page

this allows the DOM to load before executing your script.