Intro
Dieser Artikel ist auch HERE als Teil meines Blogs zu finden sind.
Wie jQuery Mobile Seite Griffe ändert
diese Situation, die Sie verstehen müssen, um zu verstehen, wie jQuery Mobile funktioniert. Es verwendet Ajax, um andere Seiten zu laden.
Die erste Seite wird normal geladen. Seine HEAD und BODY in die DOM geladen, und sie sind es auch andere Inhalte zu erwarten.Wenn die zweite Seite geladen wird, wird nur der Inhalt in den DOM Inhalt geladen. Um genau zu sein, ist sogar BODY nicht vollständig geladen. Nur das erste div mit einem Attribut data-role = "page" wird geladen, alles andere wird verworfen. Auch wenn Sie mehr Seiten in einem BODY haben, wird nur der erste geladen. Diese Regel gilt nur für nachfolgende Seiten. Wenn Sie mehr Seiten in einem anfänglichen HTML haben, werden alle geladen.
Aus diesem Grund wird Ihre Schaltfläche erfolgreich angezeigt, aber Klickereignis funktioniert nicht. Gleiches Klickereignis, dessen Eltern HEAD während des Seitenwechsels ignoriert wurde.
Hier ist eine offizielle Dokumentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Leider Sie werden nicht diese in ihrer Dokumentation beschrieben zu finden. Äther denken sie, das ist ein allgemeines Wissen oder sie haben vergessen, dies wie meine anderen Themen zu beschreiben. (jQuery Mobile Dokumentation ist groß, aber es fehlt an vielen Dingen).
Lösung 1
In Ihrer zweiten Seite, und jede andere Seite, bewegen Sie SCRIPT Tag in das BODY Inhalt, wie folgt aus:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
Dies ist eine schnelle Lösung ist aber nach wie vor ein hässlicher.
Arbeitsbeispiel kann hier in meiner anderen Antwort zu finden: Pageshow not triggered after changepage
Ein weiteres Arbeitsbeispiel: Page loaded differently with jQuery-mobile transition
Lösung 2
Verschieben Sie alle Ihre Javascript in die ursprünglichen ersten HTML. Sammle alles und lege es in eine einzige js-Datei, in eine HEAD. Initialisiere es, nachdem jQuery Mobile geladen wurde.
Am Ende werde ich beschreiben, warum dies ein Teil einer guten Lösung ist.
Lösung 3
Verwenden rel = "external" in Ihre Tasten und alle Elemente, die Sie Seite zu ändern verwenden. Aus diesem Grund wird Ajax nicht zum Laden von Seiten verwendet und Ihre jQuery Mobile App verhält sich wie eine normale Webanwendung. Leider ist dies in Ihrem Fall keine gute Lösung. Phonegap sollte niemals als normale Web-App funktionieren.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Offizielle Dokumentation, suchen Sie nach einem Kapitel: Linking without Ajax
realistische Lösung
realistische Lösung Lösung 2 verwenden würde. Aber im Gegensatz zu Lösung 2 würde ich dieselbe index.js-Datei verwenden und sie in einer HEAD jeder möglichen anderen Seite initialisieren.
Jetzt können Sie mich fragen WARUM?
Phonegap wie jQuery Mobile ist verwanzt, und früher oder später, es geht um einen Fehler und Ihre Anwendung fehlschlagen wird (darunter geladene DOM), wenn Ihr jeden Inhalt js ist in einer einzigen HTML-Datei. DOM könnte gelöscht werden und Phonegap wird Ihre aktuelle Seite aktualisieren. Wenn diese Seite kein Javascript hat, wird sie nicht funktionieren, bis sie neu gestartet wird.
Abschließende Worte
Dieses Problem kann leicht mit einer guten Seite Architektur festgelegt werden. Wenn jemand interessiert ist, habe ich eine ARTICLE über gute jQuery Mobile Seite Architektur geschrieben. In einer Nussschale diskutiere ich, dass das Wissen darüber, wie jQuery Mobile funktioniert, das Wichtigste ist, was Sie wissen müssen, bevor Sie Ihre erste App erfolgreich erstellen können.
eine perfekte Antwort! Unsere Schlussfolgerung ist, dass wir nicht jede js-Datei in jede Seite trennen können? Das macht unsere App wirklich schwer zu erhalten. Ich habe Angst, ob es bedeutet, dass ein JavaScript-Bug die ganze App mit JqueryMobile zum Absturz bringen würde. –
In Lösung 1, ist es so hässlich, eine externe Skriptdatei einzuschließen? – ogborstad
Das ist sicherlich keine schlechte Idee, ich bevorzuge alles in einer externen Datei. – Gajotres