jquery mobile multiple page, tinyscrollbar missing bar

jquery mobile multiple page, tinyscrollbar missing bar

I try to implement tinyscrollbar (tinyscrollbar.js) into jquery mobile with data-role=page. On the first page it works perfectly fine. but on the second page, the bar is missing. until i clicked on inspect element. I tried tinyscrollbar_update(), update(0), slideToggle().promise()... non works. They all give me different kind of errors. 



  1. <div class="scrollbar1"> <div class="scrollbar" style="height: 200px;"> <div class="track" style="height: 200px;"> <div class="thumb" style="top: 0px; height: 32.6530612244898px;"> <div class="end"></div> </div> </div> </div> <div class="viewport"> <div class="overview">//text</div> </div>  <div id="footerNavigation">  <a href="#" data-rel="back" data-role="button" data-inline="true">Back</a>  <a href="#theNextPage" data-role="button" data-inline="true">Next</a>  </div>
i copied the exact same code as above to my second page code: 

  1. <div id="theNextPage" data-role="page"><!--scrollbar code--></div>

and my javascript file: 

  1. $(document).ready(function() { $('.scrollbar1').tinyscrollbar(); });

anybody has any idea how is that so? Any way to solve it?