如何让 jAutoCalc 处理动态添加的元素

Question

Let me explain what i'm doing : i have a Orders table where i can add, delete and edit the client's orders. Everything works fine for the add and delete. But when it comes to edit i have some trouble. What i'm doing is pulling data from the DATABASE (using codeigniter) and displaying them to the edit modal so that i can then edit them if the clients wishes so. The Client's infos(name,adresse,state..etc) load fine but when i load his orders with the products and dynamically add them using (jQuery, ajax), the Item total field ( which calculates the sum of the product orders * its unit price using the jAutoCalc plugin) doesn't seems to work. The plugin works just fine when i'm not adding dynamically the data. Is there a way to fix this or add something that will make it work? here's my code

var thehtml = ''
for(i=0; i<data[1].length; i++){
    thehtml += 
              '<tr class=cmd'+id+'>'+
                 '<td>'+
                    '<select name="products" id="productselect>"'+
                        '<option data-price="39" value="1">Knife</option>'+
                        '<option data-price="3" value=2">Bottle</option>'+
                        '<option data-price="4" value="3">Pen</option>'+
                    '</select>'+
                 '</td>'+
                 '<td><input type="text" name="qty" value="39"></td>'+
                 '<td><input type="text" name="price" value="33"></td>'+
                 '<td><input readonly type="text" jAutoCalc="{qty} * {price}"/>'+ /// THIS DOESNT WORK IT'S DYNAMICALLY ADDED !!!!
                 '<button type="button" name="add" value="Add" class="tr_clone_remove  btn btn-danger">Remove</button>'+'</td>'+
              '</tr>;';
$(thehtml).insertAfter(itemselement); 

Please note that everything works find in non dynamically added elements. But whenever i added these table dynamically nothing works ! please help me fix it !

Answer 1

When you're adding elements to the DOM after the jAutoCalc has already been initialized, the plugin is not aware that there are new elements. You need to initialize the jAutoCalc on these elements.

You could simply do something like this

$(thehtml).jAutoCalc();

after you appended the new rows.

If that doesn't work, try

$('form').jAutoCalc();

It all depends on your HTML structure but you just need to reinitialize it.