Question

I have a site close to completion and am now on the case of fixing some small bugs. The development page can be found at this page and am having a little issue with a few of the jquery plugins used.

The main part of the site is persistent and uses a page controller to handle ajax navigation and plugin instantiation. I am finding though, that after a few clicks around the site, i.e. navigating away from a page and back that when the page functions get called again, they will break and all javascript will cease.

I wonder, is it possible to clear defined “active events” that are currently active. After having a fish around, I caught wind of assigning a variable and then giving that variable the function, but no fish. To use an example, how could I go about disabling the simplified following:

$('#carousel-awards').infiniteCarousel();
$('#another-test').timelinr();

These are two jquery plugins which have no built in method for “shutdown”. In essence, I would like a garbage collector of sorts because, once the user navigates away from a page which uses the above two functions, the page HTML is nuked for the moment.

For the sake of clarity, I have tried the following:

1. $('#carousel-awards').unbind('infiniteCarousel');

2: $('#carousel-awards').off('infinitCarousel');

3: $('#carousel-awards').infiniteCarousel = function() { return false; }

4: var test;
   test = $('#carousel-awards').infiniteCarousel();
   test = function(){ return false; }

Thank you kindly for taking the time to read my question

Answer 1

It depends on the plugin. However, if it uses the jQuery UI widget system you can most likely use .infiniteCarousel('destroy') and .timelinr('destroy') to remove those widgets from your elements.