jQuery Tabs und Ajax - wie richte ich die Seiten ein?

Question

Ich habe begonnen, mit jQuery's UI Tabs, und sie funktionieren gut für den größten Teil, aber ich habe einige Probleme hatte. Wenn ich hin und her zwischen Registerkarten wechseln, ist die Funktionalität auf einige Elemente verloren, wenn ich zu dieser Registerkarte zurück. Das hat mich dazu gebracht, zu hinterfragen, ob ich das Ganze richtig strukturiert habe. Eine Google-Suche ergab nichts, also beschloss ich, hier zu fragen.

Also die Frage ist: wenn ich Seiten, die ich bin ziehen in über Tabs + AJAX, und diese neuen Seiten haben Funktionen, die ich jQuery mit verwenden möchten, wo platziere ich, dass jQuery? Meine Struktur ist im Moment wie folgt:

Seite mit Registerkarten: main_page.php Es gibt zwei Registerkarten auf dieser Seite: eine, die "page1.php" über AJAX einliest, und eine, die "page2.php" einliest.

page1 hat seine eigenen Elemente, auf die ich dann jQuery anwende. Wo wird der jQuery-Code eingefügt? Wird er in main_page.php oder in page1.php eingefügt?

Im Moment habe ich es auf Seite 1 gesetzt, was ich für richtig halte, aber das hat zu anderen Problemen geführt, also wollte ich nur noch einmal nachsehen, ob das richtig ist.

Answer 1

Bitte legen Sie Ihr gesamtes Javascript in eine separate .js-Datei. Trennen Sie Daten (html), Darstellung (css) und Verhalten (javascript, flash...). Das wird die Wartung und Skalierung Ihrer Anwendung erleichtern. Ihre und die anderer Leute, die sie vielleicht eines Tages warten müssen.

Zu Ihrem Problem: Da Sie die Registerkarte wechseln, ist der neu geladene Inhalt nicht mit einem bestimmten Verhalten verbunden. Warum? Wenn Sie Ihre Seite zum ersten Mal laden und damit Ihr Javascript laden, gilt es nur für den aktuellen Zustand des DOM (die HTML-Struktur, wenn Sie möchten). Wenn Sie auf eine andere Registerkarte klicken, laden Sie Ihren Inhalt über Ajax, so dass die Seite nicht aktualisiert wird, was bedeutet: dieser neue Inhalt wird nicht haben, dass Javascript auf, da es nicht verfügbar war, wenn das Javascript wurde in erster Linie abgefeuert. Sie haben also 2 Möglichkeiten:

• injizieren Sie dieses Javascript zusammen mit der geladenen HTML-Datei (nach ihr). Das ist eine schlechte Praxis, aber es funktioniert.
• Sie verwenden jquery live() Funktion, um die Ereignisse zu binden. Das ist die richtige Wahl.

Mit live() werden die Verhaltensweisen jederzeit mit den DOM-Elementen verbunden.

also anstelle von

$('#myel').bind('click',dothis());

Sie tun

$('#myel').live('click',dothis());

Unabhängig davon, welche Registerkarte angezeigt wird, ist ihr Inhalt mit der Funktion verknüpft, ohne dass Sie sie erneut einbinden müssen.