Why do I have to place my entire code in $(function(){/* code goes here */});?
<p>So I understand that if I have to place this code</p>

<pre><code>$("#MyButton").click(function(){/* code goes here */});
</code></pre>

<p>in an external .js file, I have to reference the script</p>

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

<p>just before closing the body tag (and not in head) otherwise it doesn't work because the DOM has to be fully loaded before MyScript.js</p>

<p>BUT including my entire code in</p>

<pre><code>$(function(){
    $("#MyButton").click(function(){/* code goes here */});
});
</code></pre>

<p>somehow makes it all work EVEN THOUGH I place the script now in HEAD (instead of just before closing body tag, like earlier)!!</p>

<p>How come??</p>
