AJAX Calling Issue - php

Question

I downloaded the script from here
http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/
its good but some bugs like
Double Click => 3 Items add to basket
Tripple Click => 7 Items add to basket
i was trying to fix it but still cant get something .. then i see this link Disable Link while animated Basket
but i can understand where i place this code.. anybody help me to fix it please ...
$(document).ready(function(){
$("#basketItemsWrap li:first").hide();
$(".productPriceWrapRight a img").click(function() {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
var productX = $("#productImageWrapID_" + productIDVal).offset().left;
var productY = $("#productImageWrapID_" + productIDVal).offset().top;
if( $("#productID_" + productIDVal).length > 0){
var basketX = $("#productID_" + productIDVal).offset().left;
var basketY = $("#productID_" + productIDVal).offset().top;
} else {
var basketX = $("#basketTitleWrap").offset().left;
var basketY = $("#basketTitleWrap").offset().top;
}
var gotoX = basketX - productX;
var gotoY = basketY - productY;
var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3;
var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3;
$("#productImageWrapID_" + productIDVal + " img")
.clone()
.prependTo("#productImageWrapID_" + productIDVal)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
$(this).remove();
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "addToBasket"},
success: function(theResponse) {
if( $("#productID_" + productIDVal).length > 0){
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).before(theResponse).remove();
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
$("#notificationsLoader").empty();
} else {
$("#basketItemsWrap li:first").before(theResponse);
$("#basketItemsWrap li:first").hide();
$("#basketItemsWrap li:first").show("slow");
$("#notificationsLoader").empty();
}
}
});
});
});
$("#basketItemsWrap li img").live("click", function(event) {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "deleteFromBasket"},
success: function(theResponse) {
$("#productID_" + productIDVal).hide("slow", function() {$(this).remove();});
$("#notificationsLoader").empty();
}
});
});
});

Answer 1

I think what you might have to-do is at the end of the click event function then unbind the event http://api.jquery.com/unbind/ $(this).unbind();
You could possibly bind it again once the ajax has finished