J'utilise jQuery Mobile et je voudrais rediriger le navigateur vers une autre page, après que l'utilisateur a cliqué sur un bouton sur la maison. Pour ce faire, je l'ai écrit:Pageshow pas déclenché après le changement page

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

Et cela fonctionne très bien, il charge la page correcte et il met même les bonnes valeurs sur l'URL. Malheureusement, l'événement pageshow n'est pas déclenché:

<!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>

La console est toujours vide lorsque je charge cette page à partir de la précédente. Qu'est-ce qui ne va pas? Merci

Source

2013-04-18 user1012480

Je pensais que pageshow était seulement un événement pour le document cible? https://developer.mozilla.org/en-US/docs/Web/Events/pageshow – NoBugs

Solution

solution est simple, déplacer bloc de script dans une div page. Dans votre cas, le bloc de script est ignoré. changer fondamentalement comme ceci:

De:

<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>

Pour:

<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>

Exemple:

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>

album recherche-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>

Source

2013-04-18 13:09:06 Gajotres

Merci. M'a beaucoup aidé !!! – KapteinMarshall

Déplacer le script à l'intérieur d'une div travaillé comme un charme. Merci!!! – Eminem

Pageshow pas déclenché après le changement page

Répondre

Solution

Exemple:

Questions connexes