Jquery functions sticking in browser

[crobinson42]

Hey all,

I have a page that uses $.load() to bring a page into a div, within THAT div another page is brought in using $.load(). What i've noticed is if i load a page with javascript functions in the script tags, then leave that page to another, you can call the functions from a page that does not have them in script tags, in other words, it's as if they are sticking to the browser window until i refresh the entire page. I do not understand this or why it's happening. It's not causing any problems for me only the concern that the user experience will get bogged down further and further the more pages they visit because the javascript is sticking.

Any help or explanation is greatly appreciated~

-Cory

[jscheuer1]

Once something becomes part of the DOM and/or is loaded into the javascript event buffer, it remains there unless explicitly removed. Since I'm not sure what exact function you're talking about, I'm not sure how you would do that in this specific case. But for example, if you did:

var $link1 = $('#someid').click(function(){alert('here');});

and later the element with someid is taken away, you could still do:

$link1.trigger('click');

and it would fire the alert. But you could at any time do (jQuery less than version 1.7x):

$link1.unbind('click');

or for version 1.7+:

$link1.off('click');

and the reference would no longer exist.

[crobinson42]

That makes a little sense, here's an example of my concern:

My index page loads a page using jquery into a div element on the page -the page being loaded into the div contains this code:

<script type="text/javascript">
function editTerritory(id){
	$('#'+id).load('modules/sales/list/territory_list.edit.php?id='+id,function(){
		$('.editRow').hide();	
	});
	
}
function deleteTerritory(id){
	$.load('modules/sales/list/territory_list.delete.php?id='+id,function(){
	$('#'+id).remove();	
	});
}
$(document).ready(function(){
	$('#editTerritoryForm').ajaxForm(function(){
		reloadTerritory();
	});
});
function reloadTerritory(){
	$('#salesContent').load('modules/sales/list/territory_list.php');	
}
</script>

Then using the menu bar on the index page, i click a link to load a different page into the same div element (replacing it with the new html), the new page contains this code:

<script type="text/javascript">
$(document).ready(function(){
	$('#searchSales').keyup(function(){
		$('#searchResult').html('<img src="images/loading2.gif" />').load('modules/sales/main.search_sales.php?search='+this.value);
	});
});
function viewFile(fileId){
$('#salesContent').load('modules/sales/file/view_file.php?id='+fileId);
}
</script>

Now when i've loaded completely new content into this div element on the page, i can still call javascript functions from the previous content that was loaded into this same div.

My question is: How do i go about clearing out the 'javascript event buffer' between pages to prevent the uneccesarry build up of javascript code in the DOM or event buffer?

[jscheuer1]

With one possible exception, you don't need to. Each time you define a function like:

function editTerritory(id){
	$('#'+id).load('modules/sales/list/territory_list.edit.php?id='+id,function(){
		$('.editRow').hide();	
	});
	
}

it overwrites any previous function by that same name. So you aren't building up tons of references.

The one possible exception is here:

$(document).ready(function(){
	$('#searchSales').keyup(function(){
		$('#searchResult').html('<img src="images/loading2.gif" />').load('modules/sales/main.search_sales.php?search='+this.value);
	});
});

But that element is gone if and when you do that again. To prevent a problem though that might arise, you could do this before each time you load new content (for jq less than 1.7):

$('#searchSales').unbind('keyup');

For jq 1.7+:

$('#searchSales').off('keyup');

Most browsers will garbage collect that anyway and throw it out though. Some might build up the orphan references and eventually run out of memory if its done like 200, 2000, maybe 20000 or more times before the page is reloaded. Some might even hold on to the references after the page is dismissed. But browsers like that will have problems with a lot of other code and their owners will be used to closing them periodically to free up memory.

I honestly wouldn't worry about any of it unless you find something isn't working as expected and that can be traced back to multiple references to the same element.