title: Swiping in Cordova with Jquery and jgestures
body: <p>There are lots of topics in Stackoverflow when it comes to swiping using jQuery/jQuery mobile. However, none of them seem to work in the manner I want. The following is the structure of my index page of my phonegap app. As <a href="https://stackoverflow.com/questions/10978279/android-phonegap-swipe-type">this</a> topic recommended, I tried jgestures plugin.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;App&lt;/title&gt;
  &lt;script type="text/javascript" src="lib/cordova-2.2.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="lib/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="lib/jgestures.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="home"&gt;
      &lt;div id="headersec"&gt;
          &lt;!-- some elements like images here--&gt;
      &lt;/div&gt;
      &lt;div id="screen1"&gt;
          &lt;!-- three 80x80 images go here --&gt;
      &lt;/div&gt;
      &lt;div id="screen2"&gt;
          &lt;!-- three other 80x80 images go here--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All I want to do in my deviceready event is this</p>
  
  <pre><code>document.addEventListener("deviceready",onDeviceReady,false);
  
  function onDeviceReady() {
      $('#screen1').bind('swipeleft',showNext); //show next hides screen1, shows screen2 
      $('#screen2').bind('swiperight',showPrev);//show prev hides screen2, shows screen1
  }
  </code></pre>
  
  <p>But this does not work with any of the sample code I've tried.. Can anyone tell what am I doing wrong? </p>