web-dev-qa-db-fra.com

Comment initialiser des pages dans jquery mobile? pageinit pas de tir

Quelle est la bonne façon d'initialiser des objets sur une page mobile jQuery? La documentation d 'événements dit d' utiliser "pageInit()" sans aucun exemple de cette fonction, mais donne des exemples de liaison à la méthode "pageinit" (différence de casse de notes). Cependant, l'événement ne se déclenche pas du tout dans cette simple page de test:

<html>
 <body>  
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

  <div data-role="page" id="myPage">
    test
  </div>

  <script>
    $("#myPage").live('pageinit',function() {
        alert("This never happens");
    });
  </script>
 </body>
</html>

Qu'est-ce que je rate? Je devrais ajouter que si vous modifiez pageinit en un autre événement comme pagecreate, ce code fonctionne.

---- METTRE À JOUR ----

Ce bug est marqué comme "fermé" dans le suivi des problèmes JQM. Apparemment, les opinions divergent quant à savoir si cela fonctionne correctement ou non.

jquery-mobile
41
Leopd

Cela a commencé à fonctionner quand j'ai intégré le script dans la page div:

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

JQuery Mobile 1.0RC1 d'occasion

66
Wojciech Bańcer

.live() est obsolète, il est suggéré d'utiliser .on() dans jQuery 1.7+:

<script type="text/javascript">
    $(document).on('pageinit', '#indexPage',  function(){
        // code 
    });
</script>

Consultez la documentation en ligne pour plus d'informations sur .on(): http://api.jquery.com/on/

21
geralOE

Il s’avère que c’est un bug in 1.0b3 qui est corrigé dans la tête courante. Donc, si vous voulez une solution maintenant, vous devez récupérer la dernière version de git . Ou attendez la prochaine version.

9
Leopd
jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

Cela fonctionne maintenant. Désormais, toutes les transitions de page et toutes les fonctionnalités JQM AJAX fonctionneraient avec vos fonctions javascript définies! Prendre plaisir!

2
Ravindra Padhi

pageinit ne se déclenchera pas s'il se trouve sur les pages secondaires (PAS la page principale) s'il est écrit dans la balise <script> commune ...

J'ai un tel problème - sur les pages secondaires qui ne sont pas chargées avec 'rel = "external"', le code de la balise <script> commun n'est jamais exécuté ...

vraiment ce code est toujours exécuté ...

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

si vous avez fait "interface à onglets", utiliser "pageshow" est mieux

2
Stancho Stanchev

@Wojciech Bańcer

À partir de la documentation jQuery:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
1
Mike Cottier

Je devais mettre le script dans la section de page HTML qui pour moi est un bug. Il est chargé normalement dans un navigateur (pas via AJAX) et sur une seule page, y compris javascript. Nous ne sommes pas censés utiliser le document prêt.

1
Will Kriski

Le moyen le plus simple que j’ai trouvé pour y remédier était d’utiliser JQM + Steal. Cela fonctionne comme un charme tant que vous mettez:

<script type='text/javascript' src='../steal/steal.js?mypage'></script>

À l'intérieur du data-role='page' div.

Ensuite, utilisez AJAX pour connecter tout ce qui peut utiliser le même mypage.js et un lien externe (en utilisant la balise rel="external") vers tout ce qui nécessite une page de vol différente.

1
Jon

Essaye ça:

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});
0
Mekkon
$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});
0
Stanislau Ladutska