Question

我正在开发一个简单的网页（使用jQuery mobile），

主页面包含一个div（将每10秒重新加载一次）。

 <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：

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

它已经奏效了。但我还有其他问题：

每次重新加载时，Footer看起来像添加其他页脚
当我转到page2.html时，每10秒钟它也会重新加载。

Answer 1

您应该使用'label[data-id="CC"]' 'label[@data-id="CC"]'代替jQuery.html()：
```
load()
```
您应该使用JQM $('#content_to_reload').html(data);
检查当前页面
```
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 } });，请使用简单的计时器：
```
delay
```
...切换活动页面时可以停止：
```
var callInterval = 10; // seconds
var timerId = setInterval(function() {
  callToServer();
}, callInterval * 1000);
```

全部放在一起：DEMO

jQuery Mobile每10秒重新加载一次div

1 个答案: