JQuery Mobile Data-Rel = "retroceder" el enlace que hace que se disparen eventos incorrectos

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

Pregunta

Eche un vistazo al caso de prueba

Cuando abres el enlace, pagebeforeshow por Página 1 Está despedido. Cuando hace clic en el enlace para ir a página 2, pagebeforeshow por página 2 Está despedido. Hasta aquí todo bien.

Si luego usa el botón izquierdo (data-rel="back") Para regresar, se disparan en exceso. Usando el botón correcto en su lugar (enlace directo a Página 1) hace lo que esperaría, a saber, solo pagebeforeshow por Página 1 es despedido.

pagebeforeshow También se puede reemplazar con pageshow, no importa. ¿Que esta pasando aqui?

(Probado en Chrome Up-2-Date)

Fuente de referencia:

<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>
¿Fue útil?

Solución 3

Resulta que este es un insecto En la consola de Chrome.

Cromo localizador de bichos

Otros consejos

Cambie el enlace a redirección a la página 1

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

debiera ser 

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

Si encuentra algún problema con esto, elimine el corte hacia adelante 

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

Vivir Ejemplo

Etiquetas corregidas en los atributos de encabezado y botón posterior

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

JQM agrega un marcado adicional al representar la página, si usa las etiquetas incorrectas, algunas de las funciones podrían cambiar, rompa. Creo que lo que estaba sucediendo para el botón Atrás es que también agregó un atributo href = "/" y esto podría haber hecho que JQM intente navegar a él, así como volver a la última página causando el problema.

También en el encabezado que habías usado el <p> etiqueta y alineó el centro, JQM hace esto cuando se usa el <h1>

Para obtener más información sobre el botón Atrás, siempre puede consultar el documentos

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top