How to calculate each table row indipendently on keyup

Question

<tbody id="dailysale_tbody">
<tr class="items">
    <td><select id="items_select" name="dailysale[luitem_id]"><option value=""></option></select></td>
    <td><select id="brands_select" name="dailysale[lubrand_id]"><option value=""></option></select></td>
    <td><select id="models_select" name="dailysale[lumodel_id]"><option value=""></option></select></td>
    <td><input class="texts" id="dailysale_qty" name="dailysale[qty]" type="text" /></td>
    <td><input class="texts" id="dailysale_price" name="dailysale[price]" type="text" /></td>
    <td><input class="texts" id="dailysale_total" name="dailysale[total]" type="text" /></td>
    <td><input type="checkbox" class="delete_row"></td>
</tr>

$(function() {
$('#dailysale_qty, #dailysale_price').keyup(function() {
        var last_item = $('.items').find('#dailysale_qty');
        var qty = last_row.find('#dailysale_qty').val();
        var price = last_row.find('#dailysale_price').val();
        var sub_total = last_row.find('#dailysale_total');
        var s_total = qty * price;

            if (isNaN(s_total)) {
                 sub_total.val('0');
                }
            else
            sub_total.val(s_total);
    });
});

I am able to perform calculations on this row. However, when I dynamically add rows with jquery, calculations are not working on the other rows.

When the calculating function is bind a button onclick, everything works well. But not on input keyup as required. I want to perform calculations on the new added row with onkeyup on qty and price input fields.

Note than upon cloning, the ids are stripped of the current row and assigned to the new row for reference.

Your keyup event handler will not be automatically assigned to dynamically added rows, see [this](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). Also you should use classes instead of ids because...of what @Gerardo just posted — James, May 12 '17 at 19:17
You need to add the handler manually after you insert the new row and you shouldn't have the same ID on multiple elements. — Gerardo, May 12 '17 at 19:18
Have you tried something like $('.items').on('keyup change', 'td', function(){ and here the execution}? — Oliver F., May 12 '17 at 19:20
The problem is when you add new rows or cells, these new don't have the binded action. You have to rebind the action to the new created elements — Oliver F., May 12 '17 at 19:24

score 0 · Accepted Answer · answered May 12 '17 at 19:23

0

You probably not registering keyup function when you adding new row. You should do :

$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup( function(...

Every time you adding new row.

answered May 12 '17 at 19:23

Oleg Imanilov

2,591
1
13
26

Se the code below that's adding new rows. When I ass your line, the functions stops working. – JohnMilo May 12 '17 at 20:02
Try: $('#dailysale_qty, #dailysale_price').off('keyup').keyup( function(... – Oleg Imanilov May 12 '17 at 20:06
This too is killing the row adding mechanism. Note that am using $('#newitembtn').click(function() to add a new row. I've tried to use both or remove my line and replace with yours but its not working either. Please see the full code below. – JohnMilo May 12 '17 at 20:15
I see you using jQuery clone function. In this case you have to use true as parameter to clone to copy events - it must be enough. See https://api.jquery.com/clone/ – Oleg Imanilov May 12 '17 at 20:21

score 0 · Answer 2 · answered May 12 '17 at 20:05

@Nosyara The suggested line of code isn't working. Here is how am adding new rows. The commented line is what you suggested.

$(function(){
$('#newitembtn').click(function(){
    //$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function() {
    var last_row = $('#dailysale_tbody').find('tr:last');
    var newrow = last_row.clone();

    last_row.find('#items_select').removeAttr('id');
    last_row.find('#brands_select').removeAttr('id');
    last_row.find('#models_select').removeAttr('id');
    last_row.find('#dailysale_qty').removeAttr('id');
    last_row.find('#dailysale_price').removeAttr('id');
    last_row.find('#dailysale_total').removeAttr('id');

    newrow.find('#items_select').val('');
    newrow.find('#brands_select').val('');
    newrow.find('#models_select').val('');
    newrow.find('#dailysale_qty').val('');
    newrow.find('#dailysale_price').val('');
    newrow.find('#dailysale_total').val('');


    last_row.after(newrow);

    });

});

});

How to calculate each table row indipendently on keyup

2 Answers2