ajax - jQuery $.get being called multiple times...why? -

i building slideshow, hereby temp url:

http://ferdy.dnsalias.com/apps/jungledragon/html/tag/96/homepage/slideshow/mostcomments

there multiple ways navigate, clicking big image goes next image, clicking arrows go next or previous image, , can use keyboard arrows well. of these events call method loadimage (in slideshow.js).

the image loading fine, @ end of routine i'm making remote ajax call using $.get. purpose of call count view of image. here pseudo, snipped:

function loadimage(id,url) {          // general image loading routine          // enable loader indicator         $("#loading").show();          var imagepreloader = new image();         imagepreloader.src = url;         loading = true;         $(imagepreloader).imagesloaded(function() {              // load completed, hide loading indicator             $("#loading").hide();              // set image src, shows image             var img = $("#bigimage img");             img.attr({ src: url, id: id });             imagestarttime = new date().gettime();              // reset image dimensions based upon orientation             var wide = imagepreloader.width >= imagepreloader.height;             if (wide) {                 img.addclass('wide');                 img.removeclass('high');                 img.removeattr('height');             } else {                 img.addclass('high');                 img.removeclass('wide');                 img.removeattr('width');             }              // update thumb status             $(".photos li.active").removeclass('active');             $("#li-" + id).addclass('active');              // title , other attributes active thumb , set on big image             var imgtitle = $("#li-" + id + " a").attr('title');             var userid = $("#li-" + id + " a").attr('data-user_id');             var username = $("#li-" + id + " a").attr('data-user_name');              $(".caption").fadeout(400,function(){                 $(".caption h1").html('<a href="' + basepath + 'image/' + id + '">' + imgtitle + '</a>');                 $(".caption small").html('uploaded <a href="' + basepath + 'user/' + userid + '">' + username + '</a>');                 $(".caption").fadein();             });              // update counter             $(".counter").fadeout(400,function() { $(".counter").text(parseint($('.photos li.active .photo').attr('rel'))+1).fadein(); });          // call image view recording function         $.get(basepath + "image/" + id + "/record/human");          // loading routine completed         loading = false;  } 

there lot of stuff in there not relevant. @ end can see doing $.get call. problem is triggered in strange ways. first time navigate tumb, called once. next time triggered twice. after that, triggered 2 or 3 times per navigation action, 3.

i figured must events return multiple elements , therefore call loadimage routine multiple times. placed log statements in both events , loadimage routine. turns out loadimage called correctly, once per click.

this means seems $.get doing within context of single call. i'm stunned.

your problem may be:.imagesloaded jquery plug in runs through images on page. if want attach load event imagepreloader only, use

$(imagepreloader).load(function() {    ... } 

otherwise, please provide code call loadimage() function.

update: when clicking on thumb problem. $(".photos li a").live('click',... should called once on page load. adding click handler every time thumb clicked not remove previous handlers.

another option change code $(".photos li a").unbind('click').live('click', ... remove registered click handlers.