title: jquery mobile change to the next and previous data-role=page
body: <p>Im working with jquery mobile in my project and what i trying to do instead to use the swipe effect, use two button to change to the next and to the previous data-role=page.</p>
  
  <p>im trying with this javascript but i dont know why isn't working</p>
  
  <p>thx for any help.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div data-role="page" id="p1"&gt;
   &lt;div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true"&gt;                  
   &lt;a href="#prvbutton" id="goback" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse"&gt;Página Anterior&lt;/a&gt;
  &lt;a href="#nextbutton" id="goforward" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse"&gt;Próxima Página&lt;/a&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
  .....something......
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-role="page" id="p2"&gt;
   &lt;div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true"&gt;                  
   &lt;a href="#prvbutton" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse"&gt;Página Anterior&lt;/a&gt;
  &lt;a href="#nextbutton" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse"&gt;Próxima Página&lt;/a&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
  .....something......
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and so on........</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$("#nextbutton").on('click', '#goforward', function () {
   var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
   $.mobile.changePage(next, {
      transition: 'slide'
   });
  });
  
  // Previous page
  $("#prvbutton").on('click', '#goback', function () {
   var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
   $.mobile.changePage(prev, {
      transition: 'slide',
      reverse: true
   });
  });
  </code></pre>