Javascript : 장바구니에서 항목을 빼면 음수 값이 표시됩니다.

Question

나는 장바구니 스크립트를 수정하려고합니다. 문제는 카트에서 하나 이상의 항목을 삭제하려고 할 때마다 음수 값이 표시된다는 것입니다. 카트는 모든 항목이 삭제되면 다시 0으로 돌아 가지 않습니다. 항목을 잘 추가 할 수 있습니다. 다음은

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