Où placer les actions jQuery pour les pages chargées externat par onglets de l'interface utilisateur

Question

Je me demande où je dois définir mes actions jQuery pour les pages chargées de l'extérieur par onglets de l'interface utilisateur.

Ainsi, par exemple, j'ai une page index.html dont 3 onglets. Onclick chaque onglet chargera extern1.html, extern2.html, extern3.html. Ces 3 pages externes ont besoin de plusieurs actions jQuery (onload-actions, onclick-actions et plus).

Quand dois-je mettre tout le code jQuery pour les pages externes dans l'index et je charge l'une des pages externes, ce code jQuery n'affectera pas la page chargée externe lorsque je clique sur un onglet.

Quand je mets tout le code jQuery pour les pages externes dans la page externe lui-même, il causera des problèmes (je pense), parce que quand je charge un plusieurs fois onglet / page externe, il chargera le code jQuery encore et encore, à droite ?

Alors, où dois-je mettre mon code jQuery? (Quelques exemples?)

Merci!

Answer 1

Vous pouvez mettre votre code dans le gestionnaire d'événements onglet chargé:

$('.your-tabs-container').tabs({
   load: function(event, ui) { /* your code here */ }
});

ou

$('.your-tabs-container').bind('tabsload', function(event, ui) {
  /* your code here */
});

Dans ces cas, selon la documentation, vous pouvez récupérer les informations de l'interface utilisateur nécessaire à partir argument ui:

ui.tab     // anchor element of the selected (clicked) tab
ui.panel   // element, that contains the selected/clicked tab contents
ui.index   // zero-based index of the selected (clicked) tab

Answer 2

mettre votre jQuery sur le html mère et utiliser la fonction .live() pour lier les événements que vous avez voulu. docs .

Answer 3

Vous ne devez inclure une fois que la bibliothèque jQuery! Sur votre page d'index. Sur les pages externes, vous devez inclure le javascript utilisé pour cette page la personne externe:

Index:

• Inclure la bibliothèque jQuery

Externe 1:

• Fonctions jQuery pertinentes pour la page externe 1

Externe 2:

• Fonctions jQuery pertinentes pour la page externe 2

Voilà comment je le ferais: -)