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

I'm wondering wh开发者_Go百科ere 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!

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

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

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 :-)