입력 필드 업데이트 제거

Question

테이블 행을 제거하기위한 확인란을 클릭하면 합계를 업데이트하는 계산이 필요합니다. 비슷한 상황에서 행 제거 이벤트에 단순히 합계 합계 함수를 추가하여이 작업을 수행했지만이 상황에서 작동하지는 못합니다. #removeitem을 클릭하면

$(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/

Answer 1

이 문제이지만, 코드에서 사용자가 게시 한 경우 나도 몰라, 당신은 calculateSum 함수를 호출하지 않습니다. 존재하지 않는 기능인 calculateTotal으로 전화를 걸고 있습니다. 당신은 document 객체에 직접 바인딩 기능의 수를 제한해야합니다, 보조 노트로

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

:

함수는 다음과 같이 보일 것입니다. #removeitem은 ID이므로 해당 ID가있는 항목이 하나만 있어야합니다. 나는 변경 제안,

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

#removeitem 경우이 페이지에 한 번 이상 나타날 것으로 예상되는 : 아래처럼 보이도록 코드를 변경해야하거나 클릭 이벤트는 페이지에 무언가를 클릭 할 때마다 해고 될 것입니다 ID가 아닌 클래스로 ID는 페이지에 한 번만 나타납니다. 클래스는 여러 번 나타날 수 있습니다. 클래스에서 위임 된 이벤트를 사용하려면 가장 가까운 부모 요소가 아닌 부모 요소에 바인딩 할 수 있습니다.

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

Answer 2

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

당신은 (존재하지 않는) 대신 CalculateTotal의 클릭 #removeItem에 CalculateSum를 호출해야합니다. 나는이 코드를 테스트했으며 완벽하게 작동한다.

업데이트 : 위의 문제 외에도

, 실제 코드가 먼저 테이블 행을 제거하고 정의되지 않은 반환 된 테이블 ID를 찾을 $(this).closest('table').attr('id')을 사용했다.

JsFiddle에서이 문제를 해결했습니다. 업데이트 된 버전은 here입니다.