把$ .mobile.changePage放在正确的地方

我想了解$ .mobile.changePage是如何工作的。我将方法$ .mobile.changePage放在DOM中最后一个元素后面的匿名函数中，它不起作用，但是如果我将它放在document.ready中，它可以正常工作。怎么来的？任何意见大加赞赏

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 

    <!-- Start of first page --> 
    <div data-role="page" id="foo"> 

     <div data-role="header"> 
      <h1>Foo</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <p>I'm first in the source order so I'm shown as the page.</p>  
      <p>View internal page called <a href="#bar">bar</a></p> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /footer --> 

    </div><!-- /page --> 

    <!-- Start of second page --> 
    <div data-role="page" id="bar"> 

     <div data-role="header"> 
      <h1>Bar</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>  
      <p><a href="#foo">Back to foo</a></p> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /footer --> 

    </div><!-- /page --> 

    <script> 
     (function(){ 

       $.mobile.changePage($("#bar"), { transition: "slideup"});   

     })();// this doesn't work 


     $(document).ready(function(){ 

       $.mobile.changePage($("#bar"), { transition: "slideup"}); 

      })//this works 

    </script>

来源

2013-03-15 manraj82

document ready不工作，jQuery Mobile正确。通常它会在页面加载到DOM之前触发。

如果你想了解更多关于这个看看这个ARTICLE，要透明，这是我的个人博客。或找到它HERE。

为了使它工作，你需要使用正确的页面事件，像这样：

$(document).on('pagebeforeshow', '#foo', function(){  
    $.mobile.changePage($("#bar"), { transition: "slideup"}); 
});

与此同时，这不是一个很好的解决方案。在首页加载时不应更换页面，主要是因为它会导致jQuery Mobile行为异常。以太网在第一页成功加载后执行（页面#foo）或更改页面顺序，并让页面#bar成为第一页。

来源

2013-03-15 14:21:22 Gajotres

把$ .mobile.changePage放在正确的地方

回答

相关问题