jQuery Mobile non è in esecuzione javascript secondario

Question

Sto costruendo una versione mobile di un sito esistente e sto cercando una spiegazione per un problema che sto avendo (come jQuery Mobile noob).

Questa pagina ha un effetto riflesso jquery sulla prima immagine: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (lo fa applicando l'effetto a qualsiasi immagine con una classe di 'reflect').

Se si passa direttamente alla pagina, js si carica e il riflesso funziona correttamente sull'immagine. Tuttavia, se hai navigato alla pagina da qui, la pagina genitore, i js di riflessione non funziona: http://m.fijitourism.com/accommodation/coral-coast/

Da quello che ho capito, questo è a che fare con l'Ajax carico jQuery del mobile. Ho scoperto che se uso 'data-ajax = "false"' sul link dalla pagina madre, il reflection js viene caricato correttamente.

Le mie domande sono:

-È c'è un/modo migliore più corretto per ottenere la riflessione senza utilizzare i dati-ajax = "false" sul link pagina padre? Capisco che questo non è esattamente ciò che è progettato per "data-ajax =" false "". La documentazione ufficiale dice di usarlo 'se si collega da una pagina mobile che è stata caricata tramite Ajax a una pagina che contiene più pagine interne', che io non sono.

-Una spiegazione del motivo per cui il caricamento Ajax impedisce la riflessione js sarebbe grande.

Answer 1

Abbiamo scoperto che c'era una pagina che avevo perso nella documentazione ufficiale che fare con questo problema esatto: http://jquerymobile.com/test/docs/pages/page-scripting.html

per eseguire codice ogni volta che viene caricata una nuova pagina e creato dal sistema di navigazione Ajax , è necessario associare all'evento pagacreate.

L'evento pagacreate viene attivato sulla pagina in fase di inizializzazione, a destra dopo l'inizializzazione. Si consiglia di associare a questo evento invece di DOM ready() perché funziona indipendentemente dal fatto che la pagina sia stata caricata direttamente o se il contenuto sia inserito in un'altra pagina come parte del sistema di navigazione Ajax.

$ ('# aboutPage'). Live ('pagecreate', function (event) {alert ('Questa pagina è stata appena migliorata da jQuery Mobile!');});

Answer 2

Questo problema è spiegato qui: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

Prima di tutto, dopo che vi assicurate il vostro script funziona quando si aggiorna la pagina con il browser, è possibile correggere la soluzione jquerymobile.

Fondamentalmente gli script devono essere utilizzati su tutte le pagine della navigazione e gli script specifici della pagina devono essere scritti all'interno dell'elemento data-role = "page". Dato che non c'era un buon esempio sul sito jquerymobile, ed è stato un po 'complicato farlo funzionare, ho un esempio qui per far funzionare il codice sia sulla navigazione jquerymobile ajax, sia sull'aggiornamento della pagina.

// 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

Ho trovato una soluzione per questo problema cambiando il modo in cui carico le mie pagine. Inserisco target = "_ self" nell'elemento href in modo che non venga caricato utilizzando il # sistema.

• Inserirò il link seguente nella mia pagina index.html che navigerà alla mia pagina 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: Si perderà la funzione di transizione 'fantasia' pagina jQuery Mobile