[Jstall]

Hello all,

I am pretty new to jQuery but so far I love it. I am working on a personal portfolio site, the links in my menu use the .load() method to load the content of the links target into my content div. Here is the function I used :

	//Loads the content of the link into the div
	$("a").click(function(ev){

		ev.preventDefault();
		var link = $(this).attr("href");
	        $("#content").load(link);			
	}
	});

It works fine... at first. However after I have been on the site for awhile and have clicked links a few times it seems to slow way down, and can get sort of.. choppy, and strage flicking from one page to another.

I noticed that when I have Firebug open and am clicking the links it is making multiple AJAX calls with each click. I can see this in the console. It seems that the number of calls increases exponetially - 2 for the first click, 4 for the next, 8 for the next and so on. What gets written to the console is :

GET http://localhost/Portfolio/javascript.js	200 OK	4ms
GET http://localhost/Portfolio/filename.php	200 OK	44ms

The javascript file is, of course, the file with the function in it, and filename is whatever the name of the file the link I click is going to. It seems like half the calls are to the Javascript file and half to the links target, that is if there are 8 made then 4 are to the javascript file and 4 to the php file.

I am sort of at a loss for why this is happening here. Any advice or ideas anyone has as to why this is happening would be very much appreciated. Thanks very much.

This post has been edited by Jstall: 06 May 2010 - 01:03 PM

[Jstall]

Update:

Ok, I have found out why this is happening but am still in need of help. When I was making the site I found something strange. Like I have shown above I use .load to load the content of a links target into the content div of my index page. I ran into a problem though, I needed the links in the page that was loaded to have the same functionality but for some reason the links in the loaded div could not access the functions in my javascript.js file, so I had to put the link to it at the top of the pages that would be loaded. This is causing the problem I am having now. I didn't know why I had to put the link in the pages since the link was already in the head of my index page, but figured since it worked and didn't give me any problems it didn't matter, apparently I was wrong.

Could anyone tell me why I have to link the javascript file like that? Shouldn't the page that is loaded into the div have access to the methods defined in it since it is linked in the head of the index page? My stylesheet is linked there and the styles of the loaded page are fine. If anyone could tell me why they think this is happening it would be very much appreciated, thanks much.

[Jstall]

Another update:

Ok so I realized why I had to link the file multiple times, the click function was being when the jquery document load event fires and that does not fire after using .load to fill a div.

So now I have the function seperate and it gets called on the pages that I load:

function setLinks()
{

	//Loads the content of the link into the div when link is clicked
	$("a").click(function(ev){
		
		
		ev.preventDefault();
		var link = $(this).attr("href");
		$("#content").load(link);			
		
         });
}

And on the pages I want to use it I just put :

<script type = "text/javascript">
	setLinks();
</script>

The problem is I am still getting the same problem as before after clicking multiple times, the same thing is happening. For instance if I click a link for "about.php", it will fill the content div with that page. But each time I click it it seems to load that content twice as many times, just like before. So by the fourth time I'v clicked the link it is loaded the content 8 times. I am at a loss at this point, I have no idea why this is happening. Could anyone offer some insight? Thanks much!

[Jstall]

Fixed it! Ok, so , just in case other people have the same problem, the issue was this: Calling the function every time the page was loaded was causing multiple functions to be attached to the click event resulting in the function being called multiple times, the content being loaded multiple times. I found a quick solution to it with just unbinding every event handler of an anchor click event, I did this at the begining of my setLinks function.

$("a").unbind('click');

I am sure there is a more efficiant way to do this but it works for now.

[oasisjoel]

Can you post your codes. May there is something with your codes. Thanks