jQuery mobile data-rel=“retour” lien causer de tort événements à feu

Ont un look à la test

Lorsque vous ouvrez le lien, pagebeforeshow pour page 1 est déclenché. Lorsque vous cliquez sur le lien pour accéder à page 2, pagebeforeshow pour page 2 est déclenché. Pour l'instant, donc bon.

Si vous utilisez ensuite le bouton de gauche (data-) pour revenir en arrière, à l'excès les événements sont déclenchés. À l'aide du bouton droit de la place (lien direct vers page 1) fait quoi je m'attends, à savoir, seulement pagebeforeshow pour page 1 obtient déclenché.

pagebeforeshow peut également être remplacé par pageshow, n'a pas d'importance. Ce qui se passe ici?

(Testé jusqu'-2-date de Chrome)

Source de référence:

<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

    <script>
      $('#test1').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test1");
      });
      $('#test2').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test2");
      });
    </script>
  </head>

  <body>
    <div data-role="page" id="test1">

      <div data-role="header" align="center">
        <p>Page 1.</p>
      </div><!-- /header -->

      <div data-role="content">
        <p><a href="#test2">Go to page 2.</a></p>
      </div><!-- /content -->

    </div><!-- /page -->

    <div data-role="page" id="test2">

      <div data-role="header" align="center">
        <a href="/" data-icon="back" data-rel="back">Back</a>
        <p>Page 2.</p>
        <a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>
      </div><!-- /header -->

      <div data-role="content">
        <p>
        Try the two buttons and have a look at the console.<br>
        Using the left button (data-) triggers "too many" events.<br>
        The right button does what I'd expect.
        </p>
      </div><!-- /content -->

    </div><!-- /page -->
  </body>
</html>
Fonctionne très bien dans Firefox 7.
En effet. Intéressant.
Fonctionne très bien sur Safari 5.1.1. Je reçois votre erreur d'exécution de Chrome...
Ce qui a été répondu par le post suivant: stackoverflow.com/questions/9321655/...

OriginalL'auteur nisc | 2011-10-20

  1. 1

    S'il vous plaît changer le lien de redirection vers la page 1

    <a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>

    devrait être 

    <a href="/#test1" data-icon="back">Go directly to page 1</a>

    si vous trouvez des problèmes avec cette suppression de la barre oblique 

     <a href="#test1" data-icon="back">Go directly to page 1</a>
    Dans la version originale, j'ai eu deux html-de la page de configuration. Je n'ai fusionné pour cet exemple. C'est pourquoi je suis un lien vers la .html. Ne devrait pas faire une différence dans ce que l'exemple que JQM récupère automatiquement la première page dans le fichier.

    OriginalL'auteur pinaldesai

  2. 1

    Vivre Exemple

    Corrigé des balises d'en-tête et le bouton de retour attributs

    <a data-rel="back">Back</a>

    jQM ajoute des balises pour l'affichage de la page, si vous utilisez le mauvais tags certaines fonctionnalités peuvent changer, pause. Je pense que ce qui se passait pour le bouton de retour est que vous aussi ajouté a href="/" attribut, ce qui pourrait avoir causé jQM d'essayer de naviguer ainsi que de revenir à la dernière page à l'origine du problème.

    Également dans l'en-tête vous avez utilisé l' <p> tag et aligné elle centre de, jQM fait cela lors de l'utilisation de la <h1>

    Pour en savoir plus sur le bouton de retour, vous pouvez toujours vous référer à la docs

    Le JQM docs de mentionner explicitement que vous devez également définir un attribut "href" pour les clients (pour certaines raisons) ne prennent pas en charge la fonctionnalité. En dehors de cela, votre code de changements continuent de produire exactement le même résultat qu'avant pour moi. Dans l'application d'origine il y a une image dans le centre, c'est pourquoi je n'utilise pas <h1>.

    OriginalL'auteur Phill Pafford

  3. 0

    S'avère, c'est un bug dans google Chrome console.

    Chrome le bugtracker

    OriginalL'auteur nisc