Question

I have a lot of code and would like to avoid posting it all here, but if I need to I will or I’ll mock something similar up.

My problem is, I have a hidden div that I am loading a page into (with load()) and then un-hiding (with fadeIn()). When it comes time to put this div away, I load an empty page into the div and then fade it out. I’ve tested the empty page by putting a javascript alert into it and it is indeed loading, but the Javascript that I loaded into the div in the first page is still running. Does this Javascript now belong to the parent page? Is there a way to UNload it so that it is no longer running or available? I need to load the page again later with different dynamic content and the still-running Javascript conflicts with the same Javascript as it loads in again. And again.

I hope this description is understandable. I’m guessing that my problem is probably pretty simple and has to do with heirarchies that I have just yet to comprehend.

Thank you!

————- edit

Here is the Javascript in the loaded page. All of the classes and ids that it refers to exist within the loaded page. (code is adapted from tab behaviors coded by http://www.ilovecolors.com.ar/)

    //array to store IDs of our tabs
var tabs = [];
//index for array
var ind = 0;
//store setInterval reference
var inter = 0;

//change tab and highlight current tab title
function change(stringref){
    //hide the other tabs
    jQuery('.tab:not(#' + stringref + ')').hide();
    //show proper tab, catch IE6 bug
    if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0")
        jQuery('.tab#' + stringref).show();
    else 
        jQuery('.tab#' + stringref).fadeIn(200);
    //clear highlight from previous tab title
    jQuery('.htabs a:not(#' + stringref + 't)').removeClass('select');
    //highlight currenttab title
    jQuery('.htabs a[href=#' + stringref + ']').addClass('select');
}
function next(){
    alert("change");
    //call change to display next tab
    change(tabs[ind++]);
    //if it's the last tab, clear the index
    if(ind >= tabs.length)
        ind = 0;
}
jQuery(document).ready(function(){
    //store all tabs in array
    jQuery(".tab").map(function(){
        tabs[ind++] = jQuery(this).attr("id");
    })
    //set index to next element to fade
    ind = 1;
    //initialize tabs, display the current tab
    jQuery(".tab:not(:first)").hide();
    jQuery(".tab:first").show();
    //highlight the current tab title
    jQuery('#' + tabs[0] + 't').addClass('select');
    //handler for clicking on tabs
    jQuery(".htabs a").click(function(){

        //if tab is clicked, stop rotating 
        clearInterval(inter);
        //store reference to clicked tab
        stringref = jQuery(this).attr("href").split('#')[1];
        //display referenced tab
        change(stringref);
        return false;
    });
    //start rotating tabs
    inter = setInterval("next()", 3500);
});

Answer 1

The javascript is the same every time and only the content of the loaded page changes (I assume the content changes or else reloading it every time wouldn’t make sense); therefor I would take the script outside the file which is loaded in the div, and load it only once in the main page.