javascript - jquery mobile swipe function only works after page refresh -

i using jquery mobile sideswipe gestures on ipad.

the below code in file referenced in html file.

my html file has:

<div data-role="page" id="device1"> <!--content part of html page --> </div> <!--more divs incrementing id --> <div data-role="page" id="device4"> <!--content part of html page --> </div> 

this format used in multiple html files.

i use code (found on stackoverflow) - didnt want post on old thread.

    $(document).ready(function() {      $('.ui-slider-handle').on('touchstart', function(){         // when user touches slider handle, temporarily unbind page turn handlers         dounbind();     });      $('.ui-slider-handle').on('mousedown', function(){         // when user touches slider handle, temporarily unbind page turn handlers         dounbind();     });      $('.ui-slider-handle').on('touchend', function(){         //when user let's go of handle, rebind controls page turn         // put in slight delay rebind not happen until after swipe has been triggered         settimeout( function() {dobind();}, 100 );     });      $('.ui-slider-handle').on('mouseup', function(){         //when user let's go of handle, rebind controls page turn         // put in slight delay rebind not happen until after swipe has been triggered         settimeout( function() {dobind();}, 100 );     });      // set initial window (assuming #1     window.now = 1;      //get array of of pages , count     windowmax = $('div[data-role="page"]').length;      dobind(); });   // functions binding swipe events named handlers function dobind() {     $('div[data-role="page"]').on("swipeleft", turnpage);      $('div[data-role="page"]').on("swiperight", turnpageback); }  function dounbind() {     $('div[data-role="page"]').die("swipeleft", turnpage);     $('div[data-role="page"]').die("swiperight", turnpageback); }  // named handlers binding page turn controls function turnpage(){     // check see if @ highest numbers page                 if (window.now < windowmax) {         window.now++         $.mobile.changepage("#device"+window.now, "slide", false, true);     } }  function turnpageback(){     // check see if @ lowest numbered page     if (window.now != 1) {         window.now--;         $.mobile.changepage("#device"+window.now, "slide", true, true);     } }  // named handlers binding page turn controls function navigate_without_swipe(page){     // check see if @ highest numbers page                 $.mobile.changepage("#device"+page, "slide"); } 

please tell me why need reload page javascript work

because using $(document).ready

thats jquery event.

jquery mobile has own loading events because pages loaded jqm using ajax means event not fired.

i think want in pageinit check documentation see if there amore appropriate event situation.

jquery mobile documentation