размещение $ .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. Эфир делает это после того, как первая страница успешно загружена (страница ) или измените порядок страниц, и пусть страница будет первой страницей.

источник

2013-03-15 14:21:22 Gajotres

размещение $ .mobile.changePage в нужном месте

ответ

Смежные вопросы