2013-12-09 136 views
0

當我單擊複選框刪除表格行時,我希望我的計算更新彙總。我在類似的情況下通過簡單地將計算總和函數添加到移除行事件來完成此操作,但似乎無法在這種情況下使用它。刪除輸入字段更新

$(function() { 
    // Append Invoice Line 
    $(document).on('click', '#addnewitem', function() { 
     var currentTable = $(this).closest('table').attr('id'); 
     $('#' + currentTable).append('<tr><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="c_name" placeholder="Item"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="c_name" placeholder="Description"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="item_price" placeholder="Item Price" name="item_price[]"></div></td><td><button type="button" id="removeItem" class="btn btn- default"><span class="glyphicon glyphicon-trash"></span></td></tr>'); 
    }); 

    //Remove Invoice Line 
    $(document).on('click', '#removeItem', function() { 
     calculateTotal(); 
    }); 

    // Sum Amt Collected  
    function calculateSum() { 
     var sum = 0; 
     var currentTable = $(this).closest('table').attr('id'); 
     $('#' + currentTable + ' input#item_price').each(function() { 
      //add only if the value is number 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
      } 
     }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
     $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2)); 
    } 

    $(document).on('keyup', 'input#item_price', calculateSum); 
}); 

http://jsfiddle.net/swTs6/

+0

你可以爲此做jsfiddle嗎?或者給演示頁面? – nick4fake

+0

您能否提供一些HTML代碼樣本? – Kyle

回答

0

我不知道這是不是問題,但在你的代碼已經發布,點擊#removeitem,當你不叫calculateSum功能。你打電話calculateTotal,這是一個不存在的功能。

你的函數應該是這個樣子:

$(document).on('click', '#removeitem', function() { 
    calculateSum(); 
}); 

作爲一個側面說明,你應該限制的直接綁定到document目標函數的數量。 #removeitem是一個ID,所以應該只有1個具有該ID的項目。你應該改變你的代碼看起來像下面,或點擊事件將被你點擊頁面上的東西每次發射:

$('#removeitem').on('click', calculateSum); 

如果#removeitem應該不止一次出現在頁面上,我建議改變到一個類而不是一個ID。一個ID只能在頁面上出現一次。類可以多次出現。要在類上使用委派事件,您可以綁定到最近的不變的父元素。

$('#parent').on('click', '.removeitem', calculateSum); 
0
$(document).on('click', '#removeItem', function() { 
    calculateSum(); 
}); 

你需要調用#removeItem CalculateSum點擊,而不是CalculateTotal(不存在)。我測試了這個代碼,它完美的工作。

更新:

除了上述問題,實際的代碼第一次被刪除錶行,然後使用$(this).closest('table').attr('id')查找表ID,這是返回undefined。

我已經在JsFiddle中修復了這個問題,更新了一個可以訪問here

+0

http://jsfiddle.net/swTs6/ – user2154027

+0

我已修復此問題並更新了jsfiddle [此處](http://jsfiddle.net/swTs6/3/) –

+0

如果解決了您的問題,請接受此問題。 –