jQuery Mobile pageinit/pagecreate no disparar

Question

tengo 5 páginas - para facilitar digamos:

• uno.html
• dos.html
• three.html
• four.html
• five.html

Cuando cargo cada página individual, tanto pageinit como pagecreate están disparando correctamente.

El problema:

Cuando voy de uno.html a dos.html, pageinit y pagecreate tanto fuego, pero cuando vuelvo a uno.html (de dos.html), pageinit y pagecreate no lo hacen fuego.

¿Por qué es así y cómo puedo disparar siempre pageinit y pagecreate en la carga de la página, así como también navegando por cada página?

Actualización:

Por cada página que tengo:

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

// content 
</div> 

Para probar el orden en que las cosas están disparando hago:

$(document).on('pagecreate','[data-role=page]', function(){ 
    console.log('PAGECREATE'); 
}); 
$(document).on('pageinit','[data-role=page]', function(){ 
    console.log('PAGEINIT'); 
}); 
$(document).on('pagebeforeshow','[data-role=page]', function(){ 
    console.log('PAGEBEFORESHOW'); 
}); 
$(document).on('pageshow','[data-role=page]', function(){ 
    console.log('PAGESHOW'); 
}); 

¿Cómo se utiliza la pagechange para siempre llame al pageinit y pagecreate

Answer 1

Está comprobando los eventos incorrectos, pageinit y pageshow son lo que le debería preocupar.

pageinit incendios cada vez que una página se carga por primera vez, JQM almacena en caché la página en el DOM/memoria para que cuando se desplaza de vuelta de dos.html a uno.html, pageinit no se disparará (que ya ha inicializado)

pageshow incendios cada vez que se muestra una página, esto es lo que hay que estar buscando cuando se desplaza de vuelta de dos.html a uno.html

Juntos pueden lograr una gran cantidad de código limpio, use pageinit para inicializar, configurar, etc. y actualizar su DOM al estado inicial. Si tiene datos dinámicos en la página que puede cambiar entre las vistas, manejarlo de pageshow

He aquí un buen diseño para páginas web más grandes que utilizamos en un entorno de producción:

1. unen a una evento en vivo para todos los eventos de páginas/cuadros de diálogo y pageinit pageshow en algunos incluyen es decir en cada página:

   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

2. Hago referencia a cada página con un nombre: <div data-role="page" data-mypage="employeelist"> En este evento en vivo, básicamente puede tener una declaración de cambio para cada "nombre" de página, y luego verificar event.type para pageinit/pageshow o ambos y poner allí su código, luego cada vez se crea/muestra una página este evento se disparará, sabe qué página lo activó y luego llama al código correspondiente

3. Ahora, independientemente del punto de entrada de un usuario en su sitio, todos los controladores de todas las páginas son cargado.Como ya sabrá, cuando navega hacia una página, solo ingresa <script/> dentro de div [data-role = "page"] - ignorando cualquier JS en el <head/>, colocar JS por separado en cada página es un desastre y debe ser evitado en cualquier sitio grande Creo

4. Trate de no utilizar selectores de mantilla en su jQuery, por ejemplo $('div.myClass') ya que esto buscará todo su DOM que puede tener más de una página jQM. Afortunadamente, en el controlador de eventos en vivo para pageinit/pageshow mencionado anteriormente, this se refiere a la página actual. Lo mismo ocurre con todas las búsquedas DOM dentro de ella, p. $(this).find('div.myClass') esto asegura que solo está tomando elementos dentro de la página actual. (por supuesto, esto no es una preocupación para los ids). Nota en caso pageshow También puede utilizar $.mobile.activePage, pero esto no está disponible en el pageinit, así que no lo utilizan para mantener la coherencia

finalmente tuve demasiado código, por lo que construyó un objeto controlador donde js de cada página se incluye en un archivo js separado y puede registrar manejadores con el evento en vivo

El inconveniente es que todos sus js para todo su sitio se cargan en la primera página que alcanza el usuario, pero se minimizan incluso un sitio grande es más pequeño que jQuery o jQM, así que esto no debería ser una preocupación. Pero si su sitio es realmente grande, supongo que podría consultar RequireJS.

Una ventaja es que ya no está cargando todos sus JS para cada página a través de AJAX cada vez que el usuario navega a una página nueva. Si todos sus JS están disponibles en la entrada, ahora puede poner declaraciones de depuración y depurar mucho más fácilmente.

Answer 2

Creo pageinit y pagecreate solo se llaman una vez cuando la página se inicializa por primera vez y se crea en el DOM, respectivamente.

Es posible que desee ver en la pagechange caso http://jquerymobile.com/test/docs/api/events.html

Answer 3

Si desea llamar a una función cada vez antes de cargar una página, puede utilizar pagebeforeshow es decir

$("#YourPageID").on('pagebeforeshow ', function() { 
     //YourFunctionCall(); 
    }); 

, así como se puede tratar vinculando su página con id de página, pero la página init se invoca solo una vez al insertar su página en DOM. http://jquerymobile.com/test/docs/api/events.html

$("#YourPageID").on('pageinit', function() { 
     //YourFunctionCall(); 
    }); 

Answer 4

usted requiere una lectura del thourough de la documentación del evento jQuery Mobile: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Los enlaces de arriba da cierta gran penetración en cuando cada uno de los eventos de fuego, aquí hay un par de muestras en la página:

pageinit

se activa en la página que se está inicializado, después de que la nitialización ocurre. Recomendamos enlazar a este evento en lugar de DOM ready() porque este funcionará independientemente de si la página se carga directamente o si el contenido se arrastra a otra página como parte del sistema de navegación Ajax .

.

pageshow

desencadenado en el "toPage" después de la animación de transición ha completado . Las devoluciones de llamada para este evento recibirán un objeto de datos como su 2da arg. Este objeto de datos tiene las siguientes propiedades en él: prevPage (objeto) Un objeto de colección jQuery que contiene la página elemento DOM del que acabamos de hacer la transición. Tenga en cuenta que esta colección está vacía cuando la primera página se transfiere durante el inicio de la aplicación .

Para responder realmente a su pregunta, no use pageinit, use pageshow. pageshow se activa en la muestra inicial de una página (justo después de que se active el evento pageinit en el elemento), pero también en visitas posteriores a la página.

Answer 5

Comprobar este código:

$(document).delegate("#pageid", "pageinit", function() { 
    console.log('PAGEINIT');  
}); 

Answer 6

La siguiente funciona bien

<div data-role="page" id="signupForm"> 
    ... 
    ... 
<script type="text/javascript" src="test.js"></script> 
</div> 

Test.js pueden contener el siguiente código

// test.js starts here 

$('#signupForm').on('pageinit', function(){ 
    // your code goes here 
    ... 
    ... 

}); 
// test.js ends here 

En el formulario de inicio de sesión, es posible que tenga enlace para signupForm y data-ajax = "false" debe incluirse en la etiqueta href que enlaza con signupForm.

feliz Codificación

Kuppuram

Answer 7

Si se trata de una petición AJAX a esta página, el script debe escribirse en el cuerpo o de lo contrario Doe no funcionar en absoluto para el Ajax.

<!DOCTYPE html> 
<html> 
    <head> 
.......... 
    </head> 
    <body> 
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e"> 
........... 
    </div> 
    <script type="text/javascript" language="javascript" > 
    $('#self_edit_page').bind("pagebeforeshow",function(event) 
....... 
    </script> 
    </div> 
    </body> 
</html>