philcrissman.com

In a site I’m working on, I was using jQuery’s load() function to insert content into a div from a navigational menu. Seemed pretty straight forward. The original code looked like this:

1
2
3
4

$(".some_class").click(function () {
		var link = $(this).attr("title");
		$("#div-content").load("some/path/" + link + "/index.php");
	});

All that does is load a file into the div with the id #div-content; the file to load is chosen using the title attribute of the links. Not very complicated, but I was pleased.

However, once it was in action, I saw some very strange behavior. I had 6 links in my navigation menu, and by the time I clicked on the last link (and especially if I continued clicking beyond that), instead of smoothly loading the desired page, it would flicker back and forth several times between the last few pages I had clicked.

Strange.

I’m going to admit, I didn’t get far enough to determine precisely why this was happening. (If you have a good guess, feel free to let me know.) But since the page being loaded was chosen using the local “link” variable in the function, it seemed clear that something weird was going on with that. What if I just “unset” the variable right after loading the page?

1
2
3
4
5

$(".some_class").click(function () {
		var link = $(this).attr("title");
		$("#div-content").load("some/path/" + link + "/index.php");
                link = nil;
	});

Voila. The content stopped jumping back and forth between different pages. I’m still slightly unsure what was causing this behavior to begin with, but I’m mainly a pragmatist, so… as long as it works, I’m happy. It works.

If I haven’t said this enough recently, jQuery is wonderful.