0

I have dynamically generated a table data with jquery. Initially when i did it with php the keyup event was working perfectly and i was able to find the product of .qestimate and #number_of_houses for each row of the table in the T.Amount Column but now its not working, the code listing

Html:

                           <table class="tg tg-table-light-1" border="">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Material</th>
                                        <th>Qty</th>                                 
                                        <th>T. Amount</th>    
                                      </tr>
                                </thead>
                             </table>

JQuery:

  $(document).ready(function() {  

    table=$('.tg-table-light-1');




   $.getJSON("<?php echo base_url() . 'material_estimation/loadEstimates' ?>/", function(materialdetails) {
        i=1;
    $.each(materialdetails , function(i, materials){
    newmaterials= materials.Materials;
    sanitized_newmaterials=newmaterials.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, '');
    data="<tr class=\"tg-even\">

    <td class=\"\">"+i+"</td>\n\
                  <td class=\"tg-even\">"+sanitized_newmaterials+"</td>\n\
                  <td class=\"\"><input type=\"text\"  style=\"width:40px; text-align: center;\" class=\"qestimate\" name=\"qestimate[]\" value=\""+materials.Quantity_estimate+"\"/></td>\n\
                <td class=\"\"><input type=\"text\"  style=\"width:40px; text-align: center;\" class=\"tqty\" name=\"tqty[]\" value=\""+materials.total_quantity+"\"/></td>\n\

                                    </tr>";   
                    table.append(data);

                    i++;
                     });                        
                });

//The trigger event

 $(".tg-even input").keyup(multInputs);

//The function I am calling but not working

 function multInputs() {
                var mult = 0;

                $("tr.tg-even").each(function() {
                    // get the values from this row:
                    var $val1 = $('#number_of_houses option:selected').val();
                    var $val2 = $('.qestimate', this).val();
                    var $total = ($val1 * 1) * ($val2 * 1);
                    var qty = $('.tqty', this).val($total);


                });


        }

})

alphy
  • 281
  • 3
  • 16

3 Answers3

6

Using delegation:

$(document).on('keyup', '.tg-even input', function(e){
     // ...
});

Or if you wish:

$(document).on('keyup', '.tg-even input', multInputs);
Alvaro
  • 37,936
  • 23
  • 138
  • 304
1

call:

$(".tg-even input").keyup(multInputs);

after creating the dynamic fields..

rb vishnu
  • 928
  • 4
  • 16
  • 30
0

In real project, we should not add delegation trigger to document directly, or that if you have any other place to input some text, the performance is an issue. Just like this:

$('.tg-even').on('keyup', 'input', function(e){
    // ...
});
richie
  • 189
  • 3