Where to put jQuery actions for extern loaded pages by UI tabs

Question

I'm wondering where i should define my jQuery actions for externally loaded pages by UI tabs.

So for example, I've got an index.html page including 3 tabs. Onclick each tab will load extern1.html, extern2.html, extern3.html. These 3 external pages need several jQuery actions (onload-actions, onclick-actions and more).

When do I put all jQuery code for the external-pages into the index and I load one of the external pages, this jQuery code will not affect the external loaded page when I click on a tab.

When I put all jQuery code for the external-pages into the external page itself it will cause troubles (I think), because when I load a tab/external page multiple times it will load jQuery code over and over again, right?

So where do I have to put my jQuery code? (some example?)

Many thanks!

Answer 1

You could put your code in tab-loaded event handler:

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

or:

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

In these cases, according to documentation, you can retrieve necessary UI info from ui argument:

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

put your jQuery on the mother html and use .live() function to bind the events you wanted. docs here.

Answer 3

You should only include the jQuery library once! On your index page. On the external pages, you should include the javascript used the for that individual external page:

Index:

• Include jQuery library

External 1:

• jQuery functions relevant for external page 1

External 2:

• jQuery functions relevant for external page 2

That's how I would do it :-)