jQuery Mobile : `$(document).ready()` contre `$(document).on('pageinit')` – Lequel dois-je utiliser ?

Mary-Kate Olsen

Libérer： 2024-12-31 05:03:16

original

126 Les gens l'ont consulté

jQuery Mobile: `$(document).ready()` vs. `$(document).on('pageinit')` – Which Should I Use?

Mise à jour jQuery Mobile 1.4

L'article original était destiné à l'ancienne façon de gérer les pages, qui était utilisée avant jQuery Mobile 1.4. Cette ancienne méthode est désormais obsolète et restera active jusqu'à jQuery Mobile 1.5 (inclus), ce qui signifie que vous pouvez toujours utiliser tout ce qui est mentionné ci-dessous au moins jusqu'à l'année prochaine et jQuery Mobile 1.6.

Anciens événements, y compris pageinit , n'existent plus et ont été remplacés par le widget pagecontainer. Pageinit est complètement effacé et vous pouvez utiliser pagecreate à la place, qui reste inchangé.

Si vous êtes intéressé par la nouvelle façon de gérer les événements de page, reportez-vous à cet article. Sinon, n'hésitez pas à continuer à lire cet article, car il couvre bien plus que les événements de la page et peut fournir des informations précieuses.

Contenu plus ancien

Cet article peut également être trouvé dans le cadre de mon blog 🎜>ICI

$(document).on('pageinit') vs $(document).ready()

Lorsque vous apprenez jQuery pour la première fois, on vous apprend à appeler du code à l'intérieur de la fonction $(document).ready() afin que tout s'exécute dès que le DOM est chargé. Cependant, dans jQuery Mobile, Ajax est utilisé pour charger le contenu de chaque page dans le DOM pendant que vous naviguez, ce qui signifie que $(document).ready() se déclenchera avant le chargement de votre première page. Par conséquent, tout code destiné à la manipulation de page s'exécutera après une actualisation de la page, ce qui peut entraîner des bugs subtils. Sur certains systèmes, cela peut sembler fonctionner correctement, mais sur d'autres, cela peut provoquer un comportement erratique et difficile à répéter.

Syntaxe jQuery classique :

$(document).ready(function() {

});

Copier après la connexion

Pour résoudre ce problème (ce qui est effectivement un problème), les développeurs de jQuery Mobile ont créé des événements de page. En un mot, les événements de page sont des événements déclenchés à des points spécifiques de l'exécution de la page. Un de ces événements de page est pageinit

, que nous pouvons utiliser comme suit :

$(document).on('pageinit', function() {

});

Copier après la connexion

Nous pouvons aller plus loin en utilisant un identifiant de page au lieu d'un sélecteur de document. Disons que nous avons une page jQuery Mobile avec un ID de index

<div data-role="page">

Copier après la connexion

Pour exécuter du code qui ne sera disponible que pour la page d'index, nous pourrions utiliser cette syntaxe :

$('#index').on('pageinit', function() {

});

Copier après la connexion

L'événement pageinit s'exécutera chaque fois que la page est sur le point d'être chargée et affichée pour la première fois. Il ne se déclenchera plus à moins que la page ne soit actualisée manuellement ou que le chargement de la page Ajax ne soit désactivé. Si vous souhaitez que le code s'exécute à chaque fois que vous visitez une page, il est préférable d'utiliser l'événement pagebeforeshow

Voici un exemple fonctionnel pour illustrer ce problème : http://jsfiddle. net/Gajotres/Q3Usv/

Quelques notes supplémentaires sur cette question. Peu importe si vous utilisez un HTML avec plusieurs pages ou le paradigme de plusieurs fichiers HTML, il est conseillé de séparer toute la gestion de vos pages JavaScript personnalisées dans un seul fichier JavaScript distinct. Cela n'améliorera pas votre code, mais fournira une bien meilleure vue d'ensemble du code, en particulier lors de la création d'une application jQuery Mobile.

Il existe également un autre événement jQuery Mobile spécial appelé mobileinit. Lorsque jQuery Mobile démarre, il déclenche un événement mobileinit sur l'objet document. Pour remplacer les paramètres par défaut, liez-les à mobileinit. Un bon exemple d'utilisation de mobileinit consiste à désactiver le chargement des pages Ajax ou à modifier le comportement par défaut du chargeur Ajax.