<script> tag at bottom causing $(document).ready to fail

StackOverflow https://stackoverflow.com/questions/7752781

Question

I was following the snippets from html5boilerplate.com (as well as something that is recommended by yahoo) that we should put the scripts at the bottom of the page (of my site's main page).

I am also following SPI (Single page interface) - meaning I will load the content area only via ajax for any new page visit.

My page structure is..

<body>
<header />
<div id="content" />
<footer />
</body>

Now issue is .. I load JQuery at the end of main page. But I need some javascript to get executed on the child page which would be loaded in content div. So if I write $(document).ready(..) in the child page, it will crib about "$ is not defined".

Any suggestions?

Was it helpful?

Solution

Put your jquery include into your header. Then it will work. As long you don't need a very high performance site you don't need such performance hacks. And you should understand how and why the hacks work before using them. If you really want to include jquery at the bottom of the script you have to put all your JS code below the jquery include.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top