This question is a part of my other question Here. I have fiddled and example of the broken line item feature. You can use the add row button to add rows and the tiny square to the right is supposed to be a glyphicon trash can which will remove a row.
In the example given you will notice that the first two lines which are part of page load will allow you to edit quantity and rate values and will auto updated the subtotal and grand totals. The issue comes in when you add a new row and attempt to update the quantities and rates. Nothing happens.
I believe this conflict is due to something I am not seeing in the following functions. OR, worse yet something to do with the table row being added and jquery not being allowed to access the elements.
$('#addVar').on('click', function(){
var varCount = $('#lineitem tr').length;
$node = ['<tr>',
'<td class="count vert-align text-center">'+varCount+'</td>',
'<td><select name="itemID[]" class="itemID form-control">',
'<option disabled selected>Product/Service</option>',
'</select></td>',
'<td ><input class="itemdetail form-control" type="text" name="describe" value=""/></td>',
'<td ><input id="qty" class="qty form-control" type="text" name="qty" value="0"/></td>',
'<td ><input id="rate" class="rate form-control" type="text" name="rate" value="0.00"/></td>',
'<td ><input id="amount" class="amount form-control" type="text" name="amount" value="0.00"/></td>',
'<td class="vert-align text-center"><a class="removeVar"><span class="glyphicon glyphicon-trash"></span></a></td>',
'</tr>'].join('\n');
$('#lineitem > tbody:last').append($node);
});
and
$("select.itemID").mousedown(function(){
var $this = $(this);
if (data) {
$(this).val(data);
} else {
itemList();
$(this).html(result);
}
});
Other factors from the original question will have effects on this row. like select list on mousedown and on change events ( which dont work either ) are intended to populate the row after which the user would be able to edit quantity and rates.
EDIT** before duplicating with questions like that one be sure to read the code.... EVERYTHING is bound to .on() events therefore is not a duplicate problem.. Something else is wrong. I have triwd variations of .on("mousedown","#itemID" function... they change nothing directly