如何使 jAutoCalc 在动态添加的元素上工作

Question

让我解释一下我在做什么：我有一个订单表，我可以在其中添加、删除和编辑客户的订单。一切都适用于添加和删除。但是当涉及到编辑时，我遇到了一些麻烦。我正在做的是从数据库中提取数据（使用codeigniter）并将它们显示到编辑模式，以便我可以在客户愿意时编辑它们。客户的信息（名称，地址，状态..等）加载正常，但是当我用产品加载他的订单并使用（jQuery，ajax）动态添加它们时，项目总字段（计算产品订单的总和 * 它的使用 jAutoCalc 插件的单价）似乎不起作用。当我不动态添加数据时，该插件工作得很好。有没有办法解决这个问题或添加一些可以使它工作的东西？这是我的代码

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

请注意，所有工作都可以在非动态添加的元素中找到。但是每当我动态添加这些表时，都没有任何效果！请帮我解决它！

Answer 1

当你在jAutoCalc初始化之后向 DOM 添加元素时，插件不知道有新元素。您需要jAutoCalc对这些元素进行初始化。你可以简单地做这样的事情$(thehtml).jAutoCalc();在您附加新行之后。如果这不起作用，请尝试$('form').jAutoCalc();这完全取决于您的 HTML 结构，但您只需要重新初始化它。