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() {  
    ... 
});