jquery - 使用jQuery Mobile更改页面 - Thinbug

使用jQuery Mobile更改页面

时间：2011-06-06 17:07:18

标签： jquery html5 jquery-mobile

我正在使用jQuery Mobile进行学术工作。我正在使用带有事件onclick的锚点，并且没有href属性可以从一个页面更改为另一个页面。这没有问题，但加载页面后会弹出错误加载页面。

以下是此行为的示例：

testes.js：


    function createAndChange(){
        var lol="<div data-role='page' id='pg2'><div data-role='header' data-backbtn='true'>XPTO</div><h1>LOL</h1></div>";
        $("body").append(lol);
        $("#pg2").bind("callback", function(e, args) {
            alert(args.mydata);
        });
        $.mobile.changePage($("#pg2"),"slide");
        $.mobile.updateHash('#pg2',true);
        $(page).trigger("callback", args);
    }

的index.html：


<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="testes.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">header</div>

            <div data-role="content">
                <a onclick="createAndChange()">content</a>
            </div>

            <div data-role="footer">footer</div>
        </div>
    </body>
</html>

感谢您的关注。

1 个答案:

答案 0 :(得分：5)

您对$.mobile.changePage($("#pg2"),"slide");的呼叫无法正常工作。

尝试明确声明所有参数如下：

$.mobile.changePage( $("#pg2"), "slide", true, true);

I didn't check the bugs list but apparently its a bug. For more info on this check the forum.

至于错误，它就在那里，因为页面不知道这一行中args是什么 $(page).trigger("callback", args);

但这几乎是我从你的问题出来的代码....


<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <!--<script type="text/javascript" src="testes.js"></script>-->
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript">
        function createAndChange(){
            /*
            var lol="<div data-role='page' id='pg2'>"+
                    "   <div data-role='header' data-backbtn='true'>XPTO</div>"+
                    "   <h1>LOL</h1>"+
                    "</div>";
            $("body").append(lol);
            */

            $("#pg2").bind("callback", function(e, args) {
                alert(args.mydata);
            });

            //$.mobile.updateHash('#pg2',true);
            //$.mobile.changePage($("#pg2"),"slide");
            $.mobile.changePage( $("#pg2"), "slide", true, true);

            $("page").trigger("callback");
        }
        </script>
    </head>
    <body>
        <div data-role="page" id="frontpage">
            <div data-role="header">header</div>

            <div data-role="content">
                <a onclick="createAndChange()">content</a>
            </div>

            <div data-role="footer">footer</div>

        </div>

        <div data-role="page" id="pg2">
            <div data-role='header' data-backbtn='true'>XPTO</div>
            <div data-role="content">
                <h1>LOL</h1>
            </div>
            <div data-role="footer">footer</div>
        </div>

    </body>

</html>