jQuery移动更改页面不会重新加载页面

Question

jQuery移动更改页面不会重新加载页面

我正在使用JQM 1.4.2并拥有这个JS:

$.mobile.changePage( "page.html", { reloadPage: true} );

Run Code Online (Sandbox Code Playgroud)

它工作正常.问题是,这将在1.5.0中弃用,现在我尝试使用它:

$.mobile.pageContainer.pagecontainer("change", "page.html", { reload:true } );

Run Code Online (Sandbox Code Playgroud)

它不起作用(页面没有重新加载).如何强制页面重新加载？谢谢.

Answer 1

Gaj*_*res 2

首先您确定您使用的是正确的 jQuery Mobile 1.4 版本吗？jQuery Mobile 1.4 的 Beta 版本没有 pagecontainer 小部件。

这个功能运行得很好。

我什至给你做了一个可行的例子：

HTML1-index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo 1</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
        <script>
            $(document).on('pageinit', '#index', function(){ 
                $(document).on('click', '#changePage', function(){ 
                    $.mobile.pageContainer.pagecontainer( "change", "second.html", { reload: "true" } );
                });
            });
        </script>
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="button" value="Button" id="changePage">
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

HTML2 - 第二个.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo 2</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
    </head>
    <body>     
        <div data-role="page" id="second" data-theme="a" >
            <div data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>

            <div data-role="content">

            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>  
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

更新：

据我所知，这是一个错误。我已在这里报告：https ://github.com/jquery/jquery-mobile/issues/7406

归档时间：	11 年，6 月前
查看次数：	2617 次
最近记录：	11 年，4 月前