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