Script not working when I place jquery.js on footer
<p>I place <code>jquery.js</code> on my footer before <code>&lt;/body&gt;</code></p>

<pre><code>&lt;script type="text/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
</code></pre>

<p>And why this code is not firing? But when I move jquery.js on header before <code>&lt;/head&gt;</code> it working fine.. </p>

<pre><code>$(document).ready(function () {
    $("#sub-category").hide();
    $("#main-category").change(function () {
        var id = $(this).val();
        var dataString = 'id=' + id;
        $.ajax({
            type: "POST",
            url: "/select-category/",
            data: dataString,
            cache: false,
            success: function (html) {
                $("#sub-category").show();
                $("#sub-category").html(html);
            }
        });
    });
});
</code></pre>

<p>Let me know why code above is not firing when I include <code>jquery.js</code> on my footer.</p>
