Iscroll nicht auf einen Hashed -Link in JQuery Mobile geladen

Question

Ich habe auf einer meiner Detailseiten auf einer jQuery -mobilen Site eine Iscroll auf einem verschachtelten DIV eingerichtet. Grundsätzlich passiert ich, wenn ich auf die Schaltfläche auf der Hauptseite klicke (für eine "About' -Seite), es geht mit einem Hashed -Link (mit AJAX von dem, was ich gesammelt habe) zum Standort. Beispiel:

http://www.example.com/#about.php (Dies funktioniert nicht mit Iscroll, übrigens, dies ist offensichtlich keine echte URL, sondern nur ein Beispiel für Syntax)

Grundsätzlich funktioniert die URL die URL (als nicht hämschendem Link), der Iscroll funktioniert einwandfrei, aber wenn sie vom Klicken von der Hauptseite geladen wird, lädt der ISCROLL nicht und funktioniert nicht. Beispiel:

http://www.example.com/about.php

Wie bekomme ich den Anker für die <li> Um mit dem direkten Link und nicht mit dem Hashed -Link zu verlinken, oder ist es besser zu lernen, wie das Iscroll JavaScript in den von AJAX geladenen Link geladen werden kann? Danke für die Hilfe.

AKTUALISIEREN:

Hier ist die Syntax, die ich für die ListView verwendet habe, die ich mit der About -Seite verlinkt habe. Es ist die grundlegende ListView -Syntax, die ich überall verwendet habe, wo ich es gelesen habe. Alles, womit ich es zu tun habe, ist gerade der fünfte Link (ungefähr). Ich benutze keinen Hash im Anker und dennoch verknüpft er ihn immer noch mit einem Hashed -Ort. Interessant ist, dass es nicht ist http://www.example.com/index.php#about.php es ist nur http://www.example.com/#about.php.

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>

Answer 1

Ich vermute, dass Sie die ISCroll -Initialisierung innerhalb von a binden document.ready Handler. Wenn dies der Fall ist, müssen Sie dies in einen delegierten Ereignishandler ändern (dies ist Standard -Jquery Mobile Practice):

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

Wichtig: Verwenden Sie pageinit (), nicht $ (Dokument) .Ready ()

Das erste, was Sie in JQuery lernen, ist, Code in der Funktion $ (document). In JQuery Mobile wird AJAX jedoch verwendet, um den Inhalt jeder Seite in das DOM zu laden, während Sie navigieren, und der DOM -Ready -Handler führt nur für die erste Seite aus. Um Code auszuführen, wenn eine neue Seite geladen und erstellt wird, können Sie an das PageInit -Ereignis binden. Dieses Ereignis wird am Ende dieser Seite ausführlich erläutert.

Quelle: http://jquerymobile.com/demos/1.0/docs/api/events.html

Kurzgeschriebene lange Geschichte: JQuery Mobile verwendet Ajax, um neue Seiten in den DOM zu ziehen. Dies hat eine Reihe von Nebenwirkungen.

1. Alle IDs müssen eindeutig ortsweit sein, da mehrere Seiten gleichzeitig im DOM sein können.
2. Beim Verknüpfen mit einer externen Seite (<a href="about.html">About</a>) nur der data-role="page" Element und seine Nachkommen werden ergriffen (alles andere wird ignoriert).
3. Sie können sich nicht verlassen $(document).ready() Weil Seiten durch Ajax dieses Ereignis nicht abfeuern, feuern sie nicht page events Wie hier angegeben: http://jquerymobile.com/demos/1.0/docs/api/events.html

Wenn Sie bei der Verknüpfung mit einer anderen Seite ein Nachladen erzwingen möchten, gibt es mehrere Optionen:

1. Stellen rel="external" on the link tag:`
2. Stellen data-ajax="false" Auf dem Link -Tag: <a data-ajax="false" href="about.html"></a>
3. Global deaktivieren Sie die AJAX -Handhabung von Links: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Beachten Sie jedoch, dass die Verwendung einer dieser Methoden Übergänge deaktiviert.

AKTUALISIEREN

Wenn Sie Hashed -Links erhalten, bedeutet dies, dass Sie entweder das ausgeschaltet haben historyPushState Funktionalität oder Sie verwenden eine alte Version von JQuery Mobile. Wenn Sie eine alte Version verwenden, empfehlen Sie Ihnen sehr, auf 1.0 zu aktualisieren (es gibt viele Leistungssteigerungen in 1,0 RC3 und 1,0 Final): http://jquerymobile.com/download/