iScroll Non Chargement sur un lien Hashed En jQuery Mobile

Question

Je l'ai mis en place un iScroll sur un div imbriqué dans l'une de mes pages de détail dans un site mobile jQuery. Fondamentalement, ce qui se passe est quand je clique sur le bouton sur la page principale (pour « sur » la page), il va à l'emplacement avec un lien haché (en utilisant Ajax de ce que j'ai pris). Exemple:

http://www.example.com/#about.php (ce doesn « t travail avec iScroll, ce BTW est évidemment pas une URL réelle, juste un exemple de la syntaxe)

En fait quand je charge l'URL par lui-même (comme un lien non hachée), le iScroll fonctionne très bien, mais quand il est chargé de cliquer sur la page principale du iScroll ne se charge pas et ne fonctionne pas. Exemple:

http://www.example.com/about.php

Comment puis-je obtenir l'ancre pour la <li> de lien vers le lien direct et non le lien OU haché est-il préférable d'apprendre comment obtenir le javascript iScroll à la charge dans l'Ajax lien chargé? Merci pour l'aide.

Mise à jour:

Voici la syntaxe que je l'ai utilisé pour la listview que j'ai lié à la page à propos. Il est la syntaxe de base listview que je l'ai vu utilisé partout où je l'ai lu sur le sujet. Tout ce que je fais face à est le cinquième lien en ce moment (A propos). Je ne suis pas en utilisant un hachage dans l'ancre et pourtant il encore un lien vers un emplacement haché. Ce qui est intéressant est que ce n'est pas http://www.example.com/index.php#about .php il est juste http://www.example.com/#about.php.

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>

Answer 1

Je suppose que vous liez l'initialisation du iScroll dans un gestionnaire de document.ready. Si tel est le cas, alors vous devez changement à un gestionnaire d'événements délégué (ce qui est pratique courante jQuery Mobile):

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

Important: Utilisez pageInit (), pas $ (document) .ready ()

La première chose que vous apprenez dans jQuery est d'appeler du code à l'intérieur du $ (Document) fonction .ready () donc tout exécutera dès la DOM est chargé. Cependant, jQuery Mobile, Ajax est utilisé pour charger le le contenu de chaque page dans les DOM que vous naviguez, et les DOM prêt gestionnaire exécute uniquement pour la première page. Pour exécuter le code à chaque fois qu'un nouvelle page est chargée et créé, vous pouvez lier à l'événement pageinit. Cet événement est expliqué en détail au bas de cette page.

Source: http://jquerymobile.com/demos/1.0 /docs/api/events.html

Longue histoire courte fait. JQuery Mobile utilise AJAX pour tirer de nouvelles pages dans le DOM, ce qui a un certain nombre de côté touche

1. Tous les ID doit être l'ensemble du site unique, car plusieurs pages peuvent être dans les DOM à la fois.
2. Lors de la liaison à une page externe (<a href="about.html">About</a>) que l'élément de data-role="page" et ses descendants SAISIR (tout le reste sera ignoré).
3. Vous ne pouvez pas compter sur $(document).ready() parce que les pages AJAX saisirent par ne pas tirer de cet événement, ils page events incendie comme indiqué ici: http://jquerymobile.com/demos/1.0/docs/api/events.html

Si vous voulez forcer un rechargement lors de la liaison vers une autre page il y a plusieurs options:

1. Mettre rel="external" on the link tag:`
2. Mettre data-ajax="false" sur la balise link: <a data-ajax="false" href="about.html"></a>
3. désactiver globalement la gestion des AJAX de liens: http://jquerymobile.com/demos /1.0/docs/api/globalconfig.html

Notez que l'utilisation de ces méthodes permet de désactiver les transitions.

UPDATE

Si vous obtenez des liens hachés, cela signifie que soit la mise hors fonction de historyPushState ou que vous utilisez une ancienne version de jQuery Mobile. Si vous utilisez une ancienne version, je vous conseille vivement la mise à niveau à 1,0 (il y a beaucoup de gains de performances dans 1,0 RC3 et 1.0 final): http://jquerymobile.com/download/