页面未显示在多页中

时间:2014-09-25 04:26:39

标签: javascript jquery html jquery-mobile

我创建了一个多页面(data-role =&#34; page&#34;)html。在 page1 中,我最初有用户名字段  填写它存储在 localstorage 中的用户名,重定向到第2页。它正常工作再次打开应用程序以检查localstorage是否存在,直到隐藏 pagebeforeshow 事件中的 page1 ,以便在此处出现问题< strong> page2 未创建。如何解决这个问题。这是工作Fiddle

*注意在小提琴中键入文本并提交然后刷新页面。 Html就像:

 <div data-role="page" id="page1">
    <div data-role="header">
      <h1>page 1 from html</h1>
      <a >Go</a>

    </div><!-- /header -->   
      <div data-role="content">
          <label>Type text to store in LocalStoreage</label>
          <input type="text" id="name" />
          <button id="sub">Submit</button>
      </div>
  </div><!-- /page -->
  <div data-role="page" id="page2">
    <div data-role="header">
      <h1>Page 2</h1>
      <a href="#page1">Back</a>
    </div><!-- /header -->  
      <div data-role="content">
          <p> Hi i am second page</p>
      </div>
  </div><!-- /page -->

脚本是:

 $(document).on("pagebeforeshow","#page1",function(){
    $("#page1").hide();
    var locStorage = localStorage.getItem("lastname");
    //alert(locStorage);
    if(locStorage){
         $.mobile.changePage("#page2");
    }else{
        $("#page1").show();
    }
});

    $(document).on("click","#sub",function(){
       // alert( $("#name").val());
    localStorage.setItem("lastname", $("#name").val());
        $.mobile.changePage("#page2");
    });

当评论$("#page1").hide();此行 page1显示之后,仅导航到 page2 不想显示localstorage可用时的page1

编辑:在加载jquery mobile之前设置$.mobile.autoInitialize = false;,即使page1加载了几秒钟。

1 个答案:

答案 0 :(得分:0)

尝试这样的事情,

 windows.location.href="index.html#page2" 
  

OR

windows.location.href="#page2" 

而不是

$.mobile.changePage("#page2");

所以你可以尝试这段代码,

$(document).on("pagebeforeshow","#page1",function(){
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage!=null){
     windows.location.href="#page2";
}
else{
     windows.location.href="#page1";
}
});

$(document).on("click","#sub",function(){
   // alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
    windows.location.href="#page2"; 
});