Multiple jQuery .ready() - appending to existing event handler instead of creating another one
<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="[pagename]_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>home_specific.js:</strong> an example of "[pagename]_specific.js"</p>

<pre><code>jQuery(function() {
  foo = function() {alert("hello")};
}
</code></pre>

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

<p>"general.js" is a script that is shared by multiple pages, while each page has its dedicated "[pagename]_specific.js" for defining how the function assigned to <code>foo</code> behaves. </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. From <a href="http://stackoverflow.com/questions/12631817/working-with-the-same-variable-across-the-jquery-ready-defined-in-multiple-sc/12631833#comment17033977_12631833">this SO question</a>, I understand that's because the two <code>.ready()</code> have two separate event handlers. </p>

<p><strong>Question:</strong> Is there any way that the <code>.ready()</code> in "[pagename]_specific.js" appends to the event handler of the <code>.ready()</code> in "general.js", instead of defining another anonymous function?</p>
