Unload/Reload javascript or better solution for lots of ajax content? -

i have page several tabs on it. i'll use 2 example. (products, services)

instead of having content in these tabs load @ run-time, have them load specific tab content when tab clicked. have lot of tabs lot of content , it's way have reasonable initial page/load speed.

each 1 of these tabs used have own javascript file loaded after content loaded. javascript file huge , needed come universal script file universal tokens in data use same script file of tabs... example, instead of class .viewproductcomments, .viewservicecomments, etc. have .viewelementcomments of them.

this have accomplished, created problem.

is there simple way "unload actions" created script file when tab clicked, can reloaded after new elements sent page via ajax? go through , .on every little thing hierarchy level of .on capture static element quite bit ladder.

basically have lot of script needs recognized "after" content loads, , don't want reload same script file every tab, cause duplicate events or other unknown stuff.

any advice, suggestions appreciated.

thank you!

* editing provide example:

$('.post_comments_level1').each(function() {     var ctype = parseint($(this).parent().prev('div').find('.c-t').text());     var uniqueid = parseint($(this).parent().prev('div').find('.un-id').text());     var listingid = parseint($(this).parent().prev('div').find('.l-id').text());     var commentshome = $(this);      $.ajax({         url: '/myfeeds/feed.aspx',         type: 'post',         datatype: 'html',         data: {             "xfd" : 'get_comments',             "ctype" : ctype,             "unid" : uniqueid,             "pid" : portalid,             "lid" : listingid,             "uid" : userid         },         success: function(data) {             commentshome.html(data);             resetheight();         }     }); }); 

every "product" example, has own set of comments wrapped in ul, , comment elements li elements. example script finds ul class .post_comments_level1, retrieves comments database via ajax, , inserts comments within empty ul element.

so when click on next tab, it's services... can make of work long way, looking solid method. example, want action take place on newly added ul in services tab... trying head around best way optimize situation.

it sounds me need create javascript classes appropriate methods minimize amount of code you're writing accomplish same thing.

example:

your user clicks "products" tab:

$('#productstab').on('click', function(evt){      //use classes you've created.     var blah = new foo();      }); 

then user clicks "services" tab:

$('#servicestab').on('click', function(evt){      //same function, same methods, not affected old 1     var blah2 = new foo();      }); 

this primitive example of creating classes in javascript, should on right track: https://developer.mozilla.org/en-us/docs/web/javascript/introduction_to_object-oriented_javascript

edit:

the way interpreted question asking how best reuse code. described having several tabs content acted upon javascript/jquery in similar ways.

i suggested create class (which in javascript means reusable function) accomplish task.

if you're having trouble understanding this, maybe example help. @ code , read alerts:

http://jsfiddle.net/anb4k/

i created function called "foo".

i assigned variable called "blah" "new foo();".

"blah" inherits of "foo"'s functionality, using "new" operator, i've created entirely different instance of function. might tab issue. build code model doesn't matter, use function build content when conditions correct (onclick, or when visible, etc).