moving jquery function to external js file

Question

I have a jquery function that works great hard coded onto the html page right above the head tag

<script type="text/javascript" src="js/jquery.js"></script>    
<script>
$(document).ready(function() {
$('#side-menu').sidr();
});
</script>
</head>

however when i move this to the external .js file that is also right above the head tag, it doesn't work. I'm formatting it on the external.js file like this:

$(document).ready(function() {
$('#side-menu').sidr();
});

and including my external.js file on the html like this:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/external.js"></script>
</head>

is there some syntax i'm missing?

Answer 1

Without seeing your page I don't know how you are laying it all out, but since it works inline but not externally you could make sure you put:

<script type="text/javascript" src="js/external.js"></script>

...in the same place as you had:

$(document).ready(function() {
$('#side-menu').sidr();
});