Pourquoi mes scripts jQuery Mobile ne fonctionnent-ils que sur la première page ?-js tutoriel-php.cn

Pourquoi mes scripts jQuery Mobile ne fonctionnent-ils que sur la première page ?

Barbara Streisand

Libérer： 2024-11-12 03:34:02

original

235 Les gens l'ont consulté

Why Do My jQuery Mobile Scripts Only Work on the First Page?

Ça sent le DOM...

L'une des questions jQuery Mobile les plus courantes est "Pourquoi je dois mettre tout le script dans index.html" . Certaines réponses que vous y découvrirez contiennent plus de bruit que de faits. Cette question vous expliquera en détail comment fonctionne jQuery Mobile et pourquoi vos scripts ne fonctionneront pas si vous oubliez de les inclure.

Comment jQuery Mobile gère les changements de page

Pour comprendre cela situation, vous devez comprendre comment fonctionne jQuery Mobile. Il utilise ajax pour charger d'autres pages.

La première page est chargée normalement. Son HEAD et son BODY sont chargés dans le DOM, et ils sont là pour attendre d'autres contenus. Lorsque la deuxième page est chargée, seul son contenu BODY est chargé dans le DOM. Pour être plus précis, même BODY n'est pas complètement chargé. Seul le premier div avec un attribut data-role="page" sera chargé, tout le reste sera supprimé. Même si vous avez plus de pages dans un BODY, seule la première sera chargée. Cette règle ne s'applique qu'aux pages suivantes, si vous avez plus de pages dans un HTML initial, elles seront toutes chargées.

C'est pourquoi votre bouton s'affiche avec succès mais l'événement de clic ne fonctionne pas. Même événement de clic dont le parent HEAD a été ignoré lors de la transition de page.

Solution 1

Dans votre deuxième page et toutes les autres pages, déplacez votre SCRIPT taguez le contenu BODY, aimez ceci :

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

Copier après la connexion

C'est une solution rapide mais toujours moche.

Un exemple de travail peut être trouvé dans mon autre réponse ici : L'affichage de la page n'est pas déclenché après un changement de page

Un autre exemple fonctionnel : Page chargée différemment avec jQuery-mobile transition

Solution 2

Déplacez tout votre javascript dans le premier HTML d'origine. Collectez tout et placez-le dans un seul fichier js, dans un HEAD. Initialisez-le après le chargement de jQuery Mobile.

<head>
    <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://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

Copier après la connexion

En fin de compte, je décrirai pourquoi cela fait partie d'une bonne solution.

Solution 3

Utiliser rel="external" dans vos boutons et tous les éléments que vous utilisez pour changer de page. À cause de cela, ajax ne sera pas utilisé pour le chargement des pages et votre application jQuery Mobile se comportera comme une application Web normale. Malheureusement, ce n'est pas une bonne solution dans votre cas. Phonegap ne devrait jamais fonctionner comme une application Web normale.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Copier après la connexion

Documentation officielle, recherchez un chapitre : Lien sans Ajax

Solution réaliste

Une solution réaliste utiliserait la Solution 2. Mais contrairement à la solution 2, j'utiliserais ce même fichier index.js et l'initialiserais dans un HEAD de toutes les autres pages possibles.

Vous pouvez maintenant me demander POURQUOI ?

Phonegap comme jQuery Mobile est bogué, et tôt ou tard, il y aura une erreur et votre application échouera (y compris le DOM chargé) si chaque contenu js se trouve dans un seul fichier HTML. Le DOM pourrait être effacé et Phonegap actualisera votre page actuelle. Si cette page n'a pas de javascript, elle ne fonctionnera pas tant qu'elle ne sera pas redémarrée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!