I get the feeling I’m missing something obvious, but I’m new to all of this, so please forgive a cry for help!
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!
Anyway, here’s the relevant bits of code:
<head>
<link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script src="js/myjquery.js"></script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="page1" class="page">
<script type="text/javascript">
$(document).ready(function () {
alert("alert1!");
$(InitRightBar()); /// This is the problem!
});
</script>
...
</div>
...
</body>
And the entirety of the separate “myjquery.js” file:
$(function() { //ready
function InitRightBar (){
alert("alert2!");
$("#rightbar").live("swipeleft", function(){
$.mobile.changePage($("#page2"))
});
}
}); //end ready
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());
From you JS File , keep only these lines
and remove the First and the last line.Also change the following
to
only.