How to unload js script when going to next tab in jquery?

Question

Hi All

I have a site with five tabs using jquery-ui. Each loads an individual jQuery script. Now when I have loaded the second tab and go to the third tab the js out of the second tab still remains active and disturbs my actions in the third tab space.

Can someone explain me why the js out of the second tab still stays active when changing to the third tab and how I can avoid such behaviour?

Answer 1

Once you have loaded a script onto the page, it remains active until the page refreshes. I don't know about unloading, but you can certainly disable the actions of a certain script depending on what it is. Could you post an example of the script causing the issues?

EDIT: For example, if you have a script that is dependent on the tab you are in, you can condition the actions in the script with the tabs being at a certain index. A demo syntax:

//will only execute action if you are in current tab

if(tabs_ui_index == 0){
  //do something
}

to get that variable (tabs_ui_index) you can do something like this:

 $('#mytabs').bind('tabsselect', function(event, ui) {
     tabs_ui_index = ui.index;
 });

This code binds a "tabsselect" event to the element that is tabbed and sets the variable to the currently indexed tab every time a user changes a tab.

Also, you can unbind events, if you loaded a script that set a click event for a button that no longer exists, or that you are using for a different purpose now:

$("#mybutton").unbind("click");

I hope this helps. Let me know if you have any other questions.