Working with the same variable across the jQuery .ready() defined in multiple scripts
<p>Say that I have a HTML that links to two scripts:</p>

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

<p>Each of the two scripts has it's own jQuery's <code>.ready()</code> defined.</p>

<p><strong>general.js:</strong></p>

<pre><code>jQuery(function() {
  var foo;
  $('#btn').click(function() {alert(foo())});
}
</code></pre>

<p><strong>specific.js:</strong></p>

<pre><code>jQuery(function() {
  foo = function() {alert("hello")};
  $('#btn').click(function() {foo()});
}
</code></pre>

<p>where <code>#btn</code> is a button element.</p>

<p>When I clicked on <code>#btn</code> I was expecting to see "hello" dialog, but instead, I got <code>Uncaught TypeError: undefined is not a function</code> in chrome developer tools.</p>

<p>My own understanding is that <code>foo</code> should have been assigned the function already, instead of being undefined, before it's accessed by the <code>click</code> event. Obviously, my understanding is incorrect. Can someone please explain to me why it's behaving the way it is?</p>
