时间戳

首页 > 解决方案 > 如何使 jAutoCalc 在动态添加的元素上工作

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

问题描述

让我解释一下我在做什么：我有一个订单表，我可以在其中添加、删除和编辑客户的订单。一切都适用于添加和删除。但是当涉及到编辑时，我遇到了一些麻烦。我正在做的是从数据库中提取数据（使用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);

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

标签： javascriptjqueryajaxcodeigniter

解决方案

当你在jAutoCalc初始化之后向 DOM 添加元素时，插件不知道有新元素。您需要jAutoCalc对这些元素进行初始化。

你可以简单地做这样的事情

$(thehtml).jAutoCalc();

在您附加新行之后。

如果这不起作用，请尝试

$('form').jAutoCalc();

这完全取决于您的 HTML 结构，但您只需要重新初始化它。

推荐阅读