Question

我使用jqm Ajax方法从服务器获取数据，但是当从page1更改为page2并单击Refresh时，它将不会再次更新。唯一的解决方案是退出浏览器并重新打开它并再次访问该网站。任何人都可以帮助我吗？

以下是代码：

第1页：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page1</title>
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.0.css">
        <link rel="stylesheet" href="_assets/css/jqm-demos.css">
        <link rel="stylesheet" href="_assets/css/wechat-mobile-custom.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="js/jquery.params.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",//get data from servers
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                var itemId = item.id;
                                $("#list1").append('<li><a href="page2.html?id='+itemId+'"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list1").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });

            $(document).on("pagebeforeshow","#page2",function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                $("#list2").append('<li><a href="#"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list2").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });
            </script>
    </head>

    <body>

        <div data-role="page" id="page1">
            <div data-role="content" >
                <ul data-role="listview" id="list1"></ul>
            </div>
        </div>

    </body>
  </html>

2页：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page2</title>
</head>

<body>
        <div data-role="page" id="page2">
        <div data-role="content" >
            <ul data-role="listview" id="list2"></ul>
        </div>
        <script type="text/javascript">
        </script>
    </div>

</body>
</html>

Answer 1

来自jQuery Mobile文档：

重要提示：使用$（文档）.bind（'pageinit'），而不是$（文档）.ready（）

你在jQuery中学到的第一件事就是在里面调用代码   $（document）.ready（）函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

所以将您的$(document).ready()更改为$(document).bind('pageinit')，它应该有效。

刷新页面时javascript无法正常工作

1 个答案: