のjQuery Mobileは（10秒ごとに再ロードされます）私は（jQueryのモバイルで）単純なWebを開発しています

Question

10秒ごとに、

メインページはdiv要素が含まれているだけのdivをリロードします。それはすでに働い

<script type="text/javascript"> 
      $(document).ready(function() { 
      $('#content_to_reload').delay(10000).load('myserver.php'); 
      }); 
     </script> 

：

<div id="mainpage" data-role="page" > 

     <div data-role="header" data-position="fixed" data-theme="b" > 
      <h1><font face="Comic Sans Ms">Home</font></h1> 
     </div> 

    <div data-role="content" data-theme="b" > 
     <div id="content_to_reload"> 
     //Reload every 10 seconds 
//AJAX call to server 
     </div> 
    </div> 


    <div data-role="footer" data-theme="b" data-position="fixed">  
     <div data-role="navbar"> 
      <ul> 
       <li><a href="page2.html"><img src="1.png" width="50"></a></li> 
       <li><a href="page3.html"><img src="2.png" width="50"></a></li> 
       <li><a href="page4.php"><img src="3.png" width="50"></a></li> 

      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 

これは、jQueryのコンテンツ#content_to_reloadをリロードすることです。しかし、私は他の問題を抱えて：

1. それがリロードされるたびに、フッターは私がpage2.htmlに行くときにも再ロードされ、10秒ごとに、他のフッタ
2. を追加するように見えます。

Answer 1

1. あなたの代わりにload()のjQuery.html()を使用する必要があります。

   $('#content_to_reload').html(data); 
   

2. あなたがJQM pagecontainerを使用して、現在のページを確認してください：

   $(document).on('pagecontainershow', function(e, ui) { 
       switch (ui.toPage.prop('id')) { 
       case 'mainpage': 
        // start call to server 
        break; 
       default: 
        // for all other cases, stop call to server 
       } 
   }); 
   

3. の代わりdelay、使用簡易タイマー：

   それをすべて一緒に置く

   clearInterval(timerId); 
   

：DEMO

あなたがアクティブなページを切り替えるときに停止することができます

var callInterval = 10; // seconds 
var timerId = setInterval(function() { 
    callToServer(); 
}, callInterval * 1000); 

...