Удалить обновление поля ввода

Question

Когда я устанавливаю флажок, чтобы удалить строку таблицы, я хочу, чтобы мои вычисления обновляли итоговые значения. Я делал это в подобных ситуациях, просто добавляя функцию вычисления суммы к событию удаления строки, но я не могу заставить его работать в этой ситуации.

$(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 при #removeitem нажатии. Вы вызываете calculateTotal, что является несуществующей функцией.

Ваша функция должна выглядеть следующим образом:

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

В качестве примечания, вы должны ограничить количество функций, связанных непосредственно с document объекта. #removeitem - это идентификатор, поэтому должен быть только один элемент с этим идентификатором. Вы должны изменить свой код, чтобы выглядеть, как показано ниже, или что событие щелчка будет срабатывать каждый раз, когда вы щелкаете что-то на странице:

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

Если #removeitem предполагается более одного раза на странице, я хотел бы предложить изменения для класса, а не для идентификатора. Идентификатор должен отображаться только на странице один раз. Классы могут появляться несколько раз. Чтобы использовать делегированные события в классах, вы можете привязать к ближайшему не изменяющийся родительский элемент.

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

Answer 2

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

Вы должны вызвать CalculateSum на #removeItem нажмите вместо CalculateTotal (который не существует). Я тестировал этот код, и он отлично работает.

Update:

Помимо вышеуказанного вопроса, фактический код удалял строки таблицы первой, а затем с помощью $(this).closest('table').attr('id') найти идентификатор таблицы, который возвращавшегося не определен.

Я исправил это в JsFiddle, обновлен можно получить доступ here.