Javascript：从购物车中减去商品的结果为负值

Question

我有这个购物车脚本，我正在尝试修改。麻烦的是，每当我尝试删除购物车中的多个商品时，我都会得到一个负值。当所有项目被删除时，购物车永远不会归零。我可以添加项目罚款。

Here is the fiddle.

下面是此功能的代码段。完整的代码在小提琴中，因为通过向您展示我遇到的问题的示例更容易解释。

function addToCart(id, container_id, corTitle, corPrice, credit_hrs) { 
    var amount = parseFloat(corPrice); 
    var hours = parseFloat(credit_hrs); 
    var remove = "<button type=\"button\" class=\"remove\"></button>"; 
    var selected_product = "<div class=\"item \">" 
      + "<div class=\"title\">" 
      +"<div class=\"remove\"><button type=\"button\" title=\"remove from cart\" class=\"remove-from-cart\" alt=\"Remove Course\" ></button></div>"    
      + corTitle 
      + " for $" + corPrice 
      + "</div>"    
      + "<input name=\"containerId\" value=\"" + container_id 
      + "\" type=\"hidden\">" + "</div>"; 
    $(selected_product).insertBefore("#subtotals"); 

    register("add", amount, hours); 
    $(".remove-from-cart").click(function() { 

     $(this).parents(".item").slideUp("slow"); 
     console.log(this); 
     register("subtract", amount, hours); 
     $(toId(id)).removeAttr("disabled").fadeTo("slow", 1); 
     $(this).parents(".item").remove(); 
    }); 
} 

这个问题似乎是附着在删除按钮的click处理程序被调用多次被点击删除按钮时。重复调用register("subtract", amount, hours)会导致总数变为负值。我怎样才能解决这个问题？

Answer 1

的问题是，你重新运行$(".remove-from-cart").click(...)每次添加一个项目到车时间，所以所有现有的删除按钮得到额外的处理程序。

使用jQuery将HTML解析为jQuery封装的DOM结构，然后将其用作.remove-from-cart选择器的上下文（如this working fiddle中所示）。这样，.remove-from-cart选择器将只适用于您新添加的项目。

var selected_product = "<div class=\"item \">" + ...; 

// jQuery-wrapped DOM structure 
var $prod = $(selected_product) 

$prod.insertBefore("#subtotals"); 
register("add", amount, hours); 

// use $prod as jQuery context argument, 
// so `.remove-from-cart` only looks in this DOM tree 
$(".remove-from-cart", $prod).click(function() {  
    ... 
});