jQuery Mobile Website mit mehreren Dateien

Question

Ich arbeite an einer für Mobilgeräte geeigneten Website mit jQuery Mobile, möchte aber mehrere HTML-Dateien mit jeweils einer Datenrolle verwenden: "page" div (anstelle mehrerer Daten) role = "page" divs in einer Datei, wie es der Standard zu sein scheint, da dies die maximale Wiederverwendung der vorhandenen Site ermöglicht. Ich kenne das ganze data-ajax = "false" -Konzept, das ich auf den <a> Tags der Hauptseite verwenden könnte, aber das deaktiviert die Seitenübergangseffekte, die wir wirklich mögen.

Ich habe versucht, pageshow, pagebeforeshow, paginein, document.ready, etc., aber keiner von denen wird immer ausgelöst, wenn ich direkt auf diese Seite gehe, im Gegensatz zu einem Link von der Hauptseite, dh das Inhaltsverzeichnis (oder Aktualisieren die Seite nach dem Folgen eines Links aus dem Inhaltsverzeichnis). Also im Grunde meine JS-Datei wie folgt aussieht:

('div[data-role="page"]:first').live('pageshow',function(){ /*do custom stuff here */})

Ich habe auch versucht, das Hinzufügen der Verweis auf diese JS auf die TOC-Seite Datei aber kein Glück ..., das ich irgendwie erwartet, aber ich dachte, ich würde versuchen, . Es fällt mir schwer zu glauben, dass JQM einfach nicht die Seite so unterstützt (ohne die Übergangseffekte zu verlieren), also vermisse ich wahrscheinlich etwas Einfaches.

Answer 1

1. .live() abgeschrieben wird, so verwenden .delegate(): http://api.jquery.com/on
2. Sie eher zu IDs binden sollten mehrere Pseudo-Selektoren (ich glaube, das Ihr Problem ist, dass Ihre komplexen Wähler nicht gültig sein können für Event-Delegation) als die Verwendung von :

.

$(document).delegate('#my-page-id', 'pageinit', function() { 
    //you can now do work for the `#my-page-id` pseudo-page 
}); 

Wenn Sie alle der Pseudo-Seiten binden wollen, etwas zu tun global können Sie:

$(document).delegate('[data-role="page"]', 'pageinit', function() { 
    //you can now do work for all the `[data-role="page"]` "pages" 
}); 

Oder Sie könnten die verschiedenen data-role="page" Elemente setzen Klassen auf angeben, welche Sie wollen binden.