Ich habe eine Seite in einer mobilen jQuery-App mit einem Tab-Widget wie folgt:
%Vor%Wenn ich die Seite mit diesem Markup direkt im Browser lade, funktioniert alles einwandfrei.
Wenn ich jedoch von einem anderen zu dieser Seite navigiere, werden die Dinge merkwürdig. Die gesamte Seite wird ein zweites Mal geladen und nach dem schließenden </ul>
im Original-Markup in ein neues div eingefügt. Sieht so aus, als ob dies nur für den Standard-Tab gemacht wird.
Ich denke, jQuery mobile macht etwas Seltsames mit der Art, wie es das Tabs-Widget initialisiert, wenn die Seite, die es enthält, über AJAX geladen wird, gegen eine vollständige Seitenladung des Browsers. Ich kann einfach nicht herausfinden, warum oder was es verursacht!
Bearbeiten: Ich habe ein Kopfgeld darauf gelegt. Ich habe vergessen zu erwähnen, dass ich jQuery 1.11 und jQuery Mobile 1.4.1 verwende. Der Grund, warum ich jQuery UI getaggt habe, liegt darin, dass jQuery Mobile das Tabs-Widget offenbar unverändert von dort übernommen hat.
Ich protokolliere, wenn pageinit
und pageshow
aufgerufen werden. Wenn ich auf einen Link zu der Seite mit den Registerkarten klicke, wird jedes Ereignis zweimal hintereinander ausgelöst. Die zweite pageinit
und pageshow
werden von JS ausgeführt, die von jQM dynamisch in die Seite eingefügt wurde, und nicht von der ursprünglichen JS, die mit der ersten App geladen wurde. Was auch immer hier passiert, bewirkt, dass die gesamte Seite neu geladen und in das DOM eingefügt wird, wobei alle JS ein zweites Mal ausgeführt werden.
Bearbeiten 2: Beachten Sie, dass dies ohne any meines eigenen benutzerdefinierten JavaScript geschieht. Früher war ich nur an Seiteneinträge und Seiten gebunden, damit ich mich anmelden konnte, wenn sie gefeuert wurden, das war's. Auch der Inhalt innerhalb der Tabs scheint irrelevant zu sein. Wenn Sie zum Beispiel die Registerkarten nicht ausfüllen, wird das Problem nicht behoben.
Bearbeiten 3: Hier ist ein Link, der das Problem demonstriert. Ich habe seitdem den Link entfernt, dass Demo das Problem ist, da es auf meiner persönlichen Website gehostet wurde und ich bestätigte, dass es ein Fehler war.
Ok, nach der Diskussion von mehr auf den jQuery Mobile Foren, ich öffnete ein Problem auf github und es sieht so aus, als ob es ein bestätigtes Problem mit Tabs ist, die lokale Links behandeln.
Ich werde nur eine der schnellsten Lösungen kopieren, die für mich funktionieren:
%Vor%Tags und Links jquery jquery-ui jquery-mobile