Referencing JQuery function in external .js file - syntax?
<p>I get the feeling I'm missing something obvious, but I'm new to all of this, so please forgive a cry for help!</p>

<p>How exactly should I call a jQuery function of my own stored in a separate .js file? I've developed a working prototype of my app but am now trying to tidy up the code, and move various jQuery functions into a separate file where I can access them on each page. But for some reason I'm finding it impossible to access the code once I've turned it into a named function, either in the head of my html document or in the separate .js file. Crucially, I can't find a simple reference to the correct syntax for actually calling the function!</p>

<p>Anyway, here's the relevant bits of code:</p>

<pre><code>&lt;head&gt;

&lt;link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/&gt;
&lt;script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-1.7.2.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
&lt;script src="js/myjquery.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body onload="onBodyLoad()"&gt;

&lt;div data-role="page" id="page1" class="page"&gt;

    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
        alert("alert1!");
        $(InitRightBar());   /// This is the problem!
        });
        &lt;/script&gt;
...
&lt;/div&gt;
...
&lt;/body&gt;
</code></pre>

<p>And the entirety of the separate "myjquery.js" file:</p>

<pre><code>$(function() { //ready

function InitRightBar (){
alert("alert2!");
$("#rightbar").live("swipeleft", function(){
                  $.mobile.changePage($("#page2"))
            });
}

}); //end ready
</code></pre>

<p>NB: Alert 1 is always firing, but Alert 2 never fires, even if I put it the function in the html head. I've tried multiple different syntaxes instead of "$(InitRightBar());  </p>
