jQuery load() from within ajaxComplete() callback causing multiple loads

Question

I've been staring at this one for a while and I'm completely stumped. You'll need firebug for this, take a look at the AJAX requests. They seem to be multiplying after each click of next and previous, until it's too slow to load entirely:

http://www.ftsdev.com/freegreen/virtual-tour-prototype/virtual-tour.html

All the JavaScript source for this is in:

/freegreen/virtual-tour-prototype/js/virtual-tour.js

Functions to look at:

launchVirtualTour()
$('#vt-next').one('click',function()
$('#vt-prev').one('click',function()

When ajaxComplete() is called I check the file that loaded against an Array outside of the callback function. This allows me to determine whether or not it's the first or last element in the series so that I can hide the Previous or Next buttons accordingly. I have a fealing that the problems lies somewhere in lines 80-82 where I add 1 to the inArray() value stored in indexInArray.

I've search around but can't find any similar situations out there, any help is much appreciated.

Thanks!

Answer 1

I briefly tried out the page. From a quick skim of the code and my gut reaction, it looks like you aren't unbinding previously bound click events. As far as I can tell this is the flow to your bug:

1. User clicks to bring up a slide show
2. You bind next/prev click events
3. User clicks around, using the next/prev buttons
4. User clicks out of the current slide show
5. User clicks into another slide show
6. You bind next/prev click events
7. User clicks around, using the next/prev buttons, causing content to be called twice

You need to unbind the click events when the user clicks out of the first slide show. Or don't bind in step 6.