jQuery Mobile nie działa podrzędny javascript

Question

Buduję mobilną wersję istniejącej strony i szukam wyjaśnienia problemu, który mam (jako jQuery Mobile noob).

Ta strona ma efekt odbicia jquery na pierwszym obrazie: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (robi to poprzez zastosowanie efektu do dowolnego obrazu z klasą "odbicia").

Jeśli przejdziesz od razu do strony, ładowanie js i odbicie działają dobrze na obrazie. Jeśli jednak nawigowałeś do strony z tego miejsca, strona nadrzędna, js nie działa: http://m.fijitourism.com/accommodation/coral-coast/

Z tego co wiem, ma to związek z ładowaniem ajax jquery mobile. Odkryłem, że jeśli użyję "danych-ajax =" false "" na linku ze strony nadrzędnej, odbicie js ładuje się poprawnie.

Moje pytania są następujące:

-jest tam lepiej/bardziej poprawny sposób, aby osiągnąć odbicie bez użycia danych ajax = „false” na link strony rodzicem? Rozumiem, że to nie jest to, do czego jest przeznaczony "data-ajax =" false ". Oficjalna dokumentacja mówi, że należy z niej korzystać "jeśli łączysz stronę mobilną załadowaną przez Ajax do strony zawierającej wiele stron wewnętrznych", której nie mam.

-Wyjaśnienie, dlaczego ładowanie ajaxa zapobiega odbiciu js byłoby wspaniałe.

Answer 1

Okazuje się, że był to strona, która ja brakowało w oficjalnej dokumentacji czynienia z dokładnie tym numerze: http://jquerymobile.com/test/docs/pages/page-scripting.html

na wykonanie kodu, gdy nowa strona jest załadowany i tworzone przez system nawigacji Ajax , musisz powiązać ze zdarzeniem typu "pececateate".

Zdarzenie wynikowe jest wywoływane na zainicjowanej stronie, po prawej stronie po wystąpieniu inicjalizacji. Zalecamy powiązanie z tym wydarzeniem zamiast DOM ready(), ponieważ zadziała to niezależnie od tego, czy strona zostanie załadowana bezpośrednio, czy też treść zostanie wciągnięta na inną stronę jako część systemu nawigacyjnego Ajax.

$ ("# aboutPage"). Live ("pagecreate", function (event) {alert ("Ta strona została właśnie ulepszona przez jQuery Mobile!");});

Answer 2

Ten problem jest wyjaśnione tutaj: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

Przede wszystkim po upewnić się, że skrypt działa po odświeżeniu strony w przeglądarce, można naprawić rozwiązanie jquerymobile.

Zasadniczo skrypty powinny być używane na wszystkich stronach nawigacji, a skrypty specyficzne dla strony powinny być zapisane wewnątrz elementu data-role = "page". Ponieważ nie było dobrego przykładu na stronie jquerymobile, a wykonanie tej pracy było trochę trudne, mam tutaj przykład, aby kod działał zarówno w nawigacji jockeyymobile ajax, jak i odświeżaniu strony.

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

Mam obejście tego problemu, zmieniając sposób ładowania stron. Umieszczam target = "_ self" w elemencie href, aby nie ładował się za pomocą # systemu.

• Umieszczę poniższy link na mojej stronie index.html, która będzie nawigować na mojej stronie 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>

UWAGA: Spowoduje to utratę funkcji przejścia 'fantazyjne' strona jQuery Komórka