Pages Jqmobile - les éléments de la deuxième page sont visibles en première page?

Question

Comme le titre l'indique, j'ai une application html 5 qui utilise jqmobile et des pages pour faire des transitions de page. Les transitions fonctionnent bien ... le seul problème est que tous les éléments de la deuxième page peuvent être vus sur la première page! Après avoir changé de page, la transition fonctionne parfaitement et seuls les éléments du second div sont visibles.

Est-ce que quelqu'un sait ce qui se passe? Peut-être qu'il me manque un affichage: aucun quelque part?

EDIT Voici une partie de mon code.

<div data-role="page" id="page-one" data-title="Page 1" style = "padding-top:50px;"> 

      <div class = "pagecontent"> 
       <div id="nav"> 
        navbar 
       </div> 

       <div id="innerdiv"> 
        <div id="scroller" style="width:100%;height:100%;"> 

         <div id="pullDown"> 
          <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span> 
         </div> 

         <div id="container49"> 
          <div class="circlecontainer" id="circle" > 
           <div class = "gymname"> 
            Rec. Hall 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas2" width="250" height="250"></canvas> 
           </div> 
           <div class="inner" id = "innerfour"> 
            <div class="count" id="count"><span id="counter"></span><span id="percent"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction"><span id="attend"></span><span id="max"></span></div> 
           </div> 
           <div class = "oc" id ="oc1"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle2" onclick="predictor(1)"> 
           <div class = "gymname"> 
            White Building 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas3" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas4" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innerthree"> 
            <div class="count" id="count2"><span id="counter2"></span><span id="percent2"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction2"><span id="attend2"></span><span id="max2"></span></div> 
           </div> 
           <div class = "oc" id="oc2"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle3" onclick="predictor(2)"> 
           <div class = "gymname"> 
            IM Building 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas5" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas6" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innertwo"> 
            <div class="count" id="count3"><span id="counter3"></span><span id="percent3"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction3"><span id="attend3"></span><span id="max3"></span></div> 
           </div> 
           <div class = "oc" id="oc3"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle4" onclick="predictor(3)"> 
           <div class = "gymname"> 
            Fitness Loft 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas7" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas8" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innerone"> 
            <div class="count" id="count4"><span id="counter4"></span><span id="percent4"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction4"><span id="attend4"></span><span id="max4"></span></div> 
           </div> 
           <div class = "oc" id = "oc4"> 
            CLOSED 
           </div> 
          </div> 
         </div><!-- content 49 --> 
        </div><!-- page content --> 

       </div><!-- poopie --> 
      </div><!-- scroller --> 

     <a href="#page-two" id="two" data-transition="slide"></a> 
     </div> 

<div data-role="page" id="page-two" data-title="Page 2"> 
<div class = "pagecontent"> 

<div id="date">0/0/00</div> 
<div id = "pattend">Predicted Attendance:</div> 
<div id="percent"><span id="percentage">0</span>%</div> 
<div id="displayattend">0</div> 

<div id="wrapping"> 
    <div id="linediv"> 
     <div id="time"><span id="hours"></span>:<span id="min"></span><span id="ampm"> </span></div> 
     <div id="line"></div> 
     </div> 

     <div id="chart1" style="height:100%;width:100%;"></div> 
    </div><!-- wrapping --> 
    </div><!-- Page Content --> 
</div> 

Answer 1

Les deux endroits que vous avez <div class="pagecontent"> devrait être <div data-role="content">