Я использую jQuery Mobile, и я хотел бы перенаправить браузер на другую страницу после того, как пользователь нажал кнопку на дому. Для этого я написал:Страницы не запускаются после смены

$.mobile.changePage("album-search-results.html",{ 
       data:{area:searchArea, value:searchValue}, 
       transition: "pop" 
      });

И это прекрасно работает, он загружает нужную страницу и даже ставит правильные значения на URL. К сожалению, событие show page не запускается:

<!DOCTYPE html> 
<html> 
<head> 


    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
</head> 

<body> 
    <div data-role = "page" data-theme = "d" id = "SearchResults"> 

     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 

     <div data-role = "content"> 

     </div> 
    </div> 

    <script type="text/javascript"> 
     $("#SearchResults").on("pageshow",function(event, ui){ 
      console.log(ui.prevPage); 

     }); 

    </script> 
</body> 
</html>

Консоль всегда пуста, когда я загружаю эту страницу из предыдущей. Что не так? Благодаря

источник

2013-04-18 user1012480

Я думал pageshow только событие для целевого документа? https://developer.mozilla.org/en-US/docs/Web/Events/pageshow – NoBugs

Решение

Решение является простым, блок сценария перемещение внутри страницы Див. В вашем случае блок сценария отбрасывается. В основном изменить это следующим образом:

От:

<body> 
    <div data-role = "page" data-theme = "d" id = "SearchResults"> 

     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 

     <div data-role = "content"> 

     </div> 
    </div> 

    <script type="text/javascript"> 
     $("#SearchResults").on("pageshow",function(event, ui){ 
      console.log(ui.prevPage); 

     }); 

    </script> 
</body>

Кому:

<body> 
    <div data-role="page" data-theme="d" id="SearchResults"> 
     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 
     <div data-role = "content"> 

     </div> 
     <script> 
      $(document).on("pageshow","#SearchResults",function(event, ui){ 
       console.log(ui.prevPage); 
      }); 
     </script>  
    </div> 
</body>

Пример:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://www.dragan-gaic.info/js/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>  
     <script> 
      $(document).on('click', '#change-page', function(){  
       $.mobile.changePage("album-search-results.html",{ 
        data:{area:"asda", value:"1"}, 
        transition: "pop" 
       }); 
      });     
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        First Page 
       </h3> 
       <a href="#second" class="ui-btn-right">Next</a> 
      </div> 

      <div data-role="content"> 
       <a data-role="button" id="change-page">Change Page</a> 
      </div> 

      <div data-theme="a" data-role="footer" data-position="fixed"> 

      </div> 
     </div>  
    </body> 
</html>

альбом-поиск-results.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
</head> 
    <body> 
     <div data-role="page" data-theme="d" id="SearchResults"> 
      <div data-role = "header"> 
       <h1>Aggregator</h1> 
      </div> 
      <div data-role = "content"> 

      </div> 
      <script> 
       $(document).on("pageshow","#SearchResults",function(event, ui){ 
        console.log(ui.prevPage); 
       }); 
      </script>  
     </div> 
    </body> 
</html>

источник

2013-04-18 13:09:06 Gajotres

Спасибо. Помогли мне много !!! – KapteinMarshall

Перемещение скрипта внутри div работало как шарм. Благодаря!!! – Eminem

Страницы не запускаются после смены

ответ

Решение

Пример:

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