英特尔 XDK j查询移动式更改页面时出错

Intel XDK jQuery Mobile error when changing the page

本文关键字：出错 XDK 查询 移动式 英特尔      更新时间：2023-09-26

我刚刚开始使用英特尔 XDK 中的简单 jQuery 移动应用。只有两个页面（视图）和一个按钮来显示主页面的第二页。

下面是未触及的代码（由可视化设计器生成）。

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
    <title>Your New Application</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=0">
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
    </style>
    <script src="intelxdk.js"></script>
    <script type="text/javascript">
        /* This code is used to run as soon as Intel activates */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
    <script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
    <!-- content goes here-->
    <div class="uwrap">
        <div class="upage" id="mainpage" data-role="page">
            <div class="upage-outer">
                <div class="upage-content" id="mainsub">
                    <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">
                                <div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
                                    <div class="widget-container left-receptacle"></div>
                                    <div class="widget-container right-receptacle"></div>
                                    <div>
                                    <p>Text in page-1</p>
                                    </div>
                                </div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                </div>
                <!-- /upage-content -->
            </div>
            <!-- /upage-outer -->
        </div>
        <div class="upage" id="secondPage" data-role="page">
            <div class="upage-outer">
                <div id="secondPagesub" class="upage-content ">
                    <div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">
                                <div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
                                    <div class="widget-container left-receptacle"></div>
                                    <div class="widget-container right-receptacle"></div>
                                    <div>
                                        <p>Text in page 2</p>
                                    </div>
                                </div><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                </div>
            </div>
            <!-- /upage-outer -->
        </div>
        <!-- /upage -->
    </div>
    <!-- /uwrap -->
</body>

和index_user_scfripts.js文件：

(function()  {
 "use strict";
  function register_event_handlers()   {
        $("#gotoP2").click(function(evt)  {
        $("body").pagecontainer("change", "secondPage", { reverse: false});
        });
}
 $(document).ready(register_event_handlers);
})();

当我点击第一页中的按钮时，调试器jquery.min.js文件中抛出一个 JavaScript 错误：

Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"

任何建议都是好的。

问题出在调用页面更改的方法上。相反，原始index_user_scripts.js必须是：

(function() {
   "use strict";
   function register_event_handlers()  {
       $("#gotoP2").click(function(evt)  {
           $(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
       });
   }
   $(document).ready(register_event_handlers);
})();
相关文章：