Question

我正在尝试执行应用程序流程：

登录检查器：基本上检查window.localStorage["id"] != undefined是否会重定向到主页＆＃34; index.html＆＃34; $.mobile.pageContainer.pagecontainer("change", "index.html");其他$.mobile.pageContainer.pagecontainer("change", "register.html");，其中包含用于浏览应用程序功能的主菜单
主菜单只是一个导航功能，如下所示

index.html代码

<html>
    <head>
       <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
       <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
       <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
       <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
       <script type="text/javascript" charset="utf-8" src="js/menu.js"></script>
    </head>
<body>
<div data-role="page" id="home" class="bg_main" style="padding-top: 1%;">
   <div date-role="content">
      <div id="mainmenu"> 
         <img id="item1" class="menuitem" src="images/menu1.png" />
         <img id="item2" class="menuitem" src="images/menu2.png" />
         <img id="item3"  class="menuitem" src="images/menu3.png" />
         <img id="item4" class="menuitem" src="images/menu4.png" />
         <img id="item5" class="menuitem" src="images/menu5.png" />
         <img id="item6" class="menuitem" src="images/menu6.png" />
         <img id="item7" class="menuitem" src="images/menu7.png" />
      </div>
  </div>
</div>
</body>
</html>

登录

我们在每个页面的底部导航栏中也有相同的菜单项，这些项目的ID与主菜单完全相同

与每页中的页脚代码一样

<div data-role="footer" data-position="fixed" data-theme="a"> 
  <img id="home" class="imgh im40 left top_txt" src="images/bt_home.png"/>
  <img id="item1" class="imgh im40 left top_txt" src="images/item1.png"/>
  <img id="item2" class="imgh im40 left top_txt" src="images/item2.png"/>
  <img id="item3" class="imgh im40 left top_txt" src="images/item3.png"/>
  <img id="item4" class="imgh im40 left top_txt" src="images/item4.png"/>
  <img id="item5" class="imgh im40 left top_txt" src="images/item5.png"/>
  <img id="item6" class="imgh im40 left top_txt" src="images/item6.png"/>
  <img id="item7" class="imgh im40 left top_txt active" src="images/item7.png"/>
  </div>

我所做的是包括所有页面中的menu.js标题，如下所示

menu.js代码

 $(document).on("pagecreate", function (e) {

    /* created page */
    var createdPage = $(e.target);

    /* find element within it
       remove previous listener
       add new listener */

    createdPage.find("#item1").off("click").on("click", function () {
        run();
        $.mobile.pageContainer.pagecontainer("change", "item1.html");
    });

    createdPage.find("#home").off("click").on("click", function () {
        $.mobile.pageContainer.pagecontainer("change", "index.html");
    });});

item1页面的代码我在头部和函数内部包含了一个function.js

<html>
<head>
   <script  type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
   <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
   <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
   <script type="text/javascript" charset="utf-8" src="js/menu.js"></script>
   <script type="text/javascript" charset="utf-8" src="js/function.js"></script>
</head>
<body>
   <div data-role="page" id="item1">
      <div date-role="content"></div><div id="button1"></div>
   </div>
</body> 
</html>

function.js

    function run()
{$("#button1").off("click").on("click", function () {
        //do something
    });}

以下是主页的代码

 <div id="mainmenu"> 
             <img id="home" class="menuitem" src="images/home.png" />
             <img id="item1" class="menuitem" src="images/menu1.png" />
             <img id="item2" class="menuitem" src="images/menu2.png" />
             <img id="item3"  class="menuitem" src="images/menu3.png" />
             <img id="item4" class="menuitem" src="images/menu4.png" />
             <img id="item5" class="menuitem" src="images/menu5.png" />
             <img id="item6" class="menuitem" src="images/menu6.png" />
             <img id="item7" class="menuitem" src="images/menu7.png" />
          </div>

现在的问题是：

登录不再有效
当导航到包含具有click事件的另一个功能的项目之一时触发某些功能不再有效。
从item1内部导航到其他页面无法正常工作

Answer 1

更新

根据您更新的问题，使用JQM Ajax导航重定向不会加载您在index.html和register.html中拥有的任何库。所有库都应放在运行的第一页的head中。

另一个选项是，如果您希望将这些库与页面内容一起检索，请将库放在index.html / register.html的 page div中。

在单页模型中，jQuery Mobile解析每个外部文件的第一个页面 div并忽略其他任何内容。

由于每个页面都有相同的菜单，因此您应该专门定位正在创建的页面中的菜单。您不需要为每个页面添加pagecreate侦听器，只需一步即可完成。

$(document).on("pagecreate", function (e) {

    /* created page */
    var createdPage = $(e.target);

    /* find element within it
       remove previous listener
       add new listener */

    createdPage.find("#item1").off("click").on("click", function () {
        $.mobile.pageContainer.pagecontainer("change", "item1.html");
    });

    createdPage.find("#item2").off("click").on("click", function () {
        $.mobile.pageContainer.pagecontainer("change", "item2.html");
    });

    /* rest of items */
});

<强> Demo

JQuery pagecontainer改变奇怪的行为？

1 个答案:

更新