jQuery Mobile每10秒仅重新加载一个div

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>

它已经起作用了。 但是我还有其他问题：

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

Answer 1

1. 您应该使用jQuery.html()而不是load() ：

    $('#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 ，使用一个简单的计时器：

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

   ...当您切换活动页面时可以停止：

    clearInterval(timerId); 

放在一起： DEMO