jQuery mobile data-rel = lien « retour » provoquant des événements mal à cuire

StackOverflow https://stackoverflow.com/questions/7836003

Question

Jetez un oeil à l'épreuve cas

Lorsque vous ouvrez le lien, pagebeforeshow pour page 1 est tiré. Lorsque vous cliquez sur le lien pour accéder à page 2 , pagebeforeshow pour page 2 est tiré. Jusqu'à présent, si bon.

Si vous utilisez ensuite le bouton gauche (data-rel="back") pour revenir, les événements en excès sont tirés. En utilisant le bouton droit à la place (lien direct vers page 1 ) fait ce que je pense, à savoir que pagebeforeshow pour page 1 perd son travail.

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

(testé jusqu'à 2 jour 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-rel="back") triggers "too many" events.<br>
        The right button does what I'd expect.
        </p>
      </div><!-- /content -->

    </div><!-- /page -->
  </body>
</html>
Était-ce utile?

La solution 3

Il s'avère, c'est un bug dans la console de Chrome .

bugtracker

Autres conseils

S'il vous plaît changer le lien pour rediriger vers la page 1 

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

doit être 

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

si vous trouvez des problèmes avec cette barre oblique supprimer 

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

en direct Exemple

Correction des balises dans les attributs de bouton d'en-tête et le dos 

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

JQM ajoute balisage supplémentaire lors du rendu de la page, si vous utilisez les mauvaises étiquettes certaines des fonctionnalités pourrait changer, pause. Je pense que ce qui se passait pour le bouton de retour vous est également ajouté a href = « / » attribut et cela pourrait avoir causé JQM pour tenter de parcourir l'itinéraire ainsi que retourner à la dernière page l'origine du problème.

De plus dans l'en-tête vous aviez utilisé la balise <p> et aligné ce centre, JQM le fait lors de l'utilisation du <h1>

Pour en savoir plus sur le bouton de retour, vous pouvez toujours consulter le docs

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top