jQuery Mobile no está ejecutando secundaria javascript

Question

Estoy construyendo una versión móvil de un sitio existente, y estoy buscando una explicación para un problema que tengo (como novato de jQuery Mobile).

Esta página tiene un efecto de reflexión jquery en la primera imagen: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (esto se logra aplicando el efecto a cualquier imagen con una clase de 'reflejar').

Si va directamente a la página, las cargas js y el reflejo funcionan bien en la imagen. Sin embargo, si ha navegado a la página desde aquí, la página principal, la reflexión js no funciona: http://m.fijitourism.com/accommodation/coral-coast/

Según tengo entendido, esto tiene que ver con la carga de ajax de jquery mobile. Descubrí que si uso 'data-ajax =' false '' en el enlace de la página primaria, la reflexión js carga bien.

Mis preguntas son:

-¿Hay una manera mejor/más correcto para lograr el reflejo sin utilizar datos ajax = "false" en el enlace de la página de los padres? Entiendo que esto no es realmente para lo que está diseñado 'data-ajax = "false"'. La documentación oficial dice que se debe usar 'si se está enlazando desde una página móvil que se cargó mediante Ajax a una página que contiene varias páginas internas', lo que yo no soy.

- Una explicación de por qué la carga de ajax evita la reflexión js sería genial.

Answer 1

Resulta que había una página que me había perdido en la documentación oficial de tratar con este problema exacto: http://jquerymobile.com/test/docs/pages/page-scripting.html

para ejecutar código cada vez que se carga una nueva página y creado por el sistema de navegación Ajax , debe vincularse al evento pagecreate.

El evento pagecreate se desencadena en la página que se está inicializando, a la derecha después de la inicialización. Recomendamos enlazar a este evento en lugar de DOM ready() porque esto 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.

$ ('# about_Page'). Live ('pagecreate', function (event) {alert ('Esta página acaba de ser mejorada por jQuery Mobile!');});

Answer 2

Este problema se explica aquí: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

En primer lugar, después de asegurarse de que su script funciona al actualizar la página con el navegador, puede corregir la solución jquery mobile.

Básicamente las secuencias de comandos deben utilizarse en todas las páginas de la navegación, y las secuencias de comandos específicas de la página deben escribirse dentro del elemento data-role = "page". Como no había un buen ejemplo en el sitio jquerymobile, y era un poco complicado hacer que esto funcionara, tengo un ejemplo aquí para hacer que el código funcione tanto en la navegación jquerymobile ajax como en la actualización de una página.

// this code is inside the data-role="page" element, as well as the possible script src tag 
$(window).on('pageinit', function() { 
    // do normal $(document).ready() code here basically 
    }); 
}); 

Answer 3

Tengo una solución para este problema al cambiar la forma en que cargo mis páginas. Pongo target = "_ self" en el elemento href para que no se cargue usando el # sistema.

• Voy a poner el enlace a continuación en mi página index.html que irá a mi página signup.html.

<a href="signup.html" target="_self" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Signup</a>

NOTA: Usted perderá la función de transición 'de lujo' página jQuery Mobile