I am working on building a shopping cart and wanted to utilize jQuery's ajax methods to enhance some response times. If you go to http://www.blueskyvineyard.com/dry-wine and add an item to the cart, then either click the "+" or "-" to increase or decrease the quantity, it works just as expected in Firefox. However, in either flavor of IE, it will only increment or decrement once, and then will stop functioning. Here is my current code:
jQuery(document).ready(function(){ jQuery("#highlight").animate({ backgroundColor: "#b1f3b1" }, 500 ); jQuery("#highlight").animate({ backgroundColor: "white" }, 500 ); jQuery("#highlight").animate({ backgroundColor: "#b1f3b1" }, 500 ); jQuery("#highlight").animate({ backgroundColor: "white" }, 500 ); jQuery('#clearCart').click(function() { jQuery.get("/", { clearCart: "1"} ); jQuery("#minicart").html("<h1>Your Cart</h1><p>Your cart is empty.</ p>"); return false; }); jQuery("#clearCart").confirm({ msg:'Are you Sure? ' }); jQuery(".ajax-container").each(function (i) { var target = this; var $target = jQuery(target); var id = jQuery(this).attr("id"); jQuery("#remove" + id).click(function () { jQuery("#ajaxwrapper"+id).text(""); jQuery.getJSON("/ajax-cart", { clearItem: id}, function(json){ if (json.e == "0") { jQuery("#totalitems").text(json.t); jQuery("#subtotal").text(json.s); jQuery("#discounttotal").text(json.d); } else { jQuery("#minicart").html("<h1>Your Cart</h1><p>Your cart is empty.</p>"); } }); return false; }); jQuery("#inc" + id).click(function () { var quantity = $target.text(); var incvalue = parseInt(quantity) + 1; $target.text(incvalue); jQuery.getJSON("/ajax-cart", { increment: id}, function(json){ jQuery("#totalitems").text(json.t); jQuery("#subtotal").text(json.s); jQuery("#discounttotal").text(json.d); }); return false; }); jQuery("#dec" + id).click(function () { var quantity = $target.text(); var decvalue = parseInt(quantity) - 1; $target.text(decvalue); if (decvalue == "0") { jQuery("#ajaxwrapper"+id).text(""); } jQuery.getJSON("/ajax-cart", { decrement: id}, function(json){ if (json.e == "0") { jQuery("#totalitems").text(json.t); jQuery("#subtotal").text(json.s); jQuery("#discounttotal").text(json.d); } else { jQuery("#minicart").html("<h1>Your Cart</h1><p>Your cart is empty.</p>"); } }); return false; }); }); jQuery(".ajax").attr({ href: "#" }); }); Any ideas? Also any tips on making my code less redundant would be helpful as I am kind of new at this.