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);
});
}
})