Heim >Web-Frontend >js-Tutorial >Warum funktionieren meine jQuery Mobile-Skripte nur auf der ersten Seite?

Warum funktionieren meine jQuery Mobile-Skripte nur auf der ersten Seite?

Barbara StreisandOriginal: 2024-11-12 03:34:02268Durchsuche

Why Do My jQuery Mobile Scripts Only Work on the First Page?

Riecht nach DOM...

Eine der häufigsten Fragen zu jQuery Mobile ist „Warum ich das gesamte Skript in index.html einfügen muss“ . Einige Antworten, die Sie dort finden werden, enthalten mehr Lärm als Tatsachen. Diese Frage erklärt Ihnen im Detail, wie jQuery Mobile funktioniert und warum Ihre Skripte nicht funktionieren, wenn Sie vergessen, sie einzubinden.

Wie jQuery Mobile mit Seitenänderungen umgeht

Um dies zu verstehen In dieser Situation müssen Sie verstehen, wie jQuery Mobile funktioniert. Es verwendet Ajax, um andere Seiten zu laden.

Die erste Seite wird normal geladen. Sein HEAD und BODY werden in den DOM geladen und warten dort auf andere Inhalte. Wenn die zweite Seite geladen wird, wird nur deren BODY-Inhalt in das DOM geladen. Genauer gesagt ist selbst BODY nicht vollständig geladen. Nur das erste Div mit dem Attribut data-role="page" wird geladen, alles andere wird verworfen. Selbst wenn Sie mehrere Seiten in einem BODY haben, wird nur die erste Seite 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 das Klickereignis funktioniert nicht. Dasselbe Klickereignis, dessen übergeordnetes Element HEAD beim Seitenübergang ignoriert wurde.

Lösung 1

Verschieben Sie auf Ihrer zweiten Seite und auf jeder anderen Seite Ihr SCRIPT-Tag in den BODY-Inhalt einfügen, etwa so:

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

Dies ist eine schnelle, aber dennoch hässliche Lösung.

Ein Arbeitsbeispiel finden Sie in meinem andere Antwort hier: Pageshow wird nach Änderung der Seite nicht ausgelöst

Ein weiteres funktionierendes Beispiel: Seite wird bei jQuery-Mobile-Übergang anders geladen

Lösung 2

Verschieben Sie Ihr gesamtes Javascript in den ursprünglichen ersten HTML-Code. Sammeln Sie alles und fügen Sie es in einer einzigen js-Datei in einem HEAD ein. Initialisieren Sie es, nachdem jQuery Mobile geladen wurde.

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

Am Ende werde ich beschreiben, warum dies Teil einer guten Lösung ist.

Lösung 3

Verwenden Sie rel="external" in Ihren Schaltflächen und allen Elementen, die Sie zum Seitenwechsel 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: Verknüpfung ohne Ajax

Realistische Lösung

Eine realistische Lösung würde Lösung 2 verwenden. Aber im Gegensatz zu Lösung 2 würde ich dieselbe index.js-Datei verwenden und sie in einem HEAD jeder möglichen anderen Seite initialisieren.

Jetzt können Sie mich fragen WARUM ?

Phonegap wie jQuery Mobile ist fehlerhaft, und früher oder später wird es einen Fehler geben und Ihre App schlägt fehl (einschließlich geladenem DOM), wenn sich jeder JS-Inhalt in einer einzigen HTML-Datei befindet. DOM könnte gelöscht werden und Phonegap aktualisiert Ihre aktuelle Seite. Wenn diese Seite kein Javascript hat, funktioniert sie erst nach einem Neustart.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine jQuery Mobile-Skripte nur auf der ersten Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery ajax html if for include Error using Attribute Event JS dom this transition phonegap web app everything

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind berechnete Eigenschaftsnamen und wie funktionieren sie in JavaScript-Objektliteralen?Nächster Artikel：Was sind berechnete Eigenschaftsnamen und wie funktionieren sie in JavaScript-Objektliteralen?

In Verbindung stehende Artikel

Mehr sehen