2012-09-15 12 views
6

Tengo una aplicación Phonegap & jQuery Mobile que funciona muy bien en Android y en la web. En iOS estoy obteniendo resultados inesperados, que parecen ser causados ​​por el hecho de que el evento document.pageinit al que enlazo el controlador para la mayoría de los procesos de la aplicación se activa dos veces.Documento pageinit se activa más de una vez en iOS (jQueryMobile)

No, no lo vinculé dos veces. No, no usé document.ready. Sí, lo vinculé al documento, al comienzo del guión y no dentro de ninguna otra función.

$(document).on('pageinit',function(event){ 
    alert(' Pageinit on document'); 
    //Some more code 
}) 

La primera vez que se dispara, la pantalla de inicio todavía se muestra. En este punto, mientras probaba en un MacBook Pro con XCode, la consola no está disponible: el mensaje anterior no apareció en la consola cuando usé console.log.

Segunda vez, el fuego poco después de que jQueryMobile haya creado la primera página.

¿Qué está causando esta doble cocción y qué puedo hacer al respecto?

EDITAR: Me di cuenta más adelante en esa página, no solo se dispara por segunda vez, sino que cada vez que abro una nueva función data-role = 'page' div. Ver mi respuesta a continuación.

Respuesta

15

aprecio respuesta Zoltans y puede ser relevante en algunos casos, pero eso no fue la causa.

$(document).on('pageinit') disparará por cada transición de página utilizada en su aplicación jQuery Mobile. Esto sucederá tanto con enlaces HTML como al usar $.mobile.changePage();.

Sorprendentemente, el docs no menciona esto en ninguna parte: le aconsejan usarlo sin mencionar que disparará en cada página subsiguiente.

No puedo creer que estén enmarcando este ejemplo problemático como un equivalente válido de $(document).ready().

Deberían aconsejarle que vincule utilizando .one() en lugar de .bind() o on() para evitar la ejecución de código múltiple.

+0

Thaaaaank you! Estuve buscando una solución para los últimos minutos, Google no da nada por "pageinit llamado dos veces", y su '.one()' es la solución ideal. Me gustaría votar por diez si pudiera :) – PiotrK

+0

Sorprendentemente, he visto este comportamiento cuando uso el código de mi aplicación en los navegadores de escritorio (IE10 y Chrome/Windows) y no en iOS. Esta solución sugerida también ayudó a esos casos. Gran sugerencia ¡Gracias! –

2

Ocurre porque creo que usa jquery y jquery mobile juntos. Pero la solución es simple. Trate

$(document:not(.processed)).addClass('processed').on('pageinit',function(event) 

Esto debe resolverlo

2

Editar cuerpo a <body data-role="page"> debería resolver el problema.

0

Estaba luchando con ese problema demasiado tiempo para no compartirlo con los demás. Y creo que no solo es un problema en iOS, sino también en Android (en mi caso provocó un parpadeo).

El evento "pageinit" se invocó dos veces cada vez que se realizó una solicitud. El primero fue el adecuado para obtener datos para la url proporcionada, se llamó a otro después de que se cargó una nueva página en DOM (página jQueryMobile inyectada dinámicamente en el documento).Creo que hay más soluciones para resolver este problema, aquí va la mía:

$(document).ready(function(){ 
    $(this).delegate("#page-selector", "pageinit", function(ev, data){}); 
    // I don't know why the line has to be present, but otherwise does not work 
}); 

Y mi documento HTML se parece a:

<html> 
<head>...here goes scripts...</head> 
<body> 
    <div id="#page-selector"> <!-- just wrapper --> 
     <div data-role="page"> 
     ... content... 
     </div> 
    </div> 
</body> 
</html> 

espero que no ahorrará un tiempo precioso para los demás!

Cuestiones relacionadas