Javascript 附加元素后未触发的事件

你好

因此，我尝试动态添加行，当您在这些行中输入数字时，它应该计算一些内容，第一个未追加的元素可以正常工作，但其余元素不会被触发

我使用

$（document）.on（'keyup change'，'element'）

等尝试了多种解决方案。 我试图实现的是，计算应该也适用于每个附加行

---

在html中，第一行是纯旧html，您有以下内容：

<td valign="top" align="left" width="9.5%"><input type="text" data-target="row_article" autocomplete="none" /></td>

---

您只需将动态代码中的相应值添加到所有具有此

数据目标的
td
。
在html中，您的第一行是纯旧html，您有以下内容：

<td valign="top" align="left" width="9.5%"><input type="text" data-target="row_article" autocomplete="none" /></td>

您只需将动态代码中的相应值添加到所有具有此数据目标CDA的
td
。
为您的
数据目标提供一个值，因为您是通过附加到它们的数据目标来获取输入值的

在您的第一行中，它肯定会起作用，因为您已经为他们的数据目标提供了价值。像这样

<input type="text" data-target="row_price_in" autocomplete="none" value="0,00">
...
...


...
...

然而，在新添加的输入中，您只是这样放置，而不提供任何数据目标值

<input type="text" data-target="" autocomplete="none" value="0,00>

为您的
数据目标提供一个值，因为您是通过附加到它们的数据目标来获取输入值的

在您的第一行中，它肯定会起作用，因为您已经为他们的数据目标提供了价值。像这样

<input type="text" data-target="row_price_in" autocomplete="none" value="0,00">
...
...


...
...

然而，在新添加的输入中，您只是这样放置，而不提供任何数据目标值

<input type="text" data-target="" autocomplete="none" value="0,00>

您的代码中几乎没有问题

首先，在用于查找特定元素的任何新附加元素中，都没有像data target、row_margin、data sum这样的属性集

您还必须使用委派方法来附加事件处理程序，这将允许您在动态附加的元素上触发/引发事件。您可以将
此
传递给函数，以便只引用特定于当前表的元素

您也不会使用
.each（）
进行循环

请尝试以下方法：


var offer\u rows\u i=2；
$（'body'）。在（'input'，'div.list div.list_row table'，function（）上{
计算边缘（本）；
});
$（“div.section_按钮[数据操作='new-offer-row']）。单击（函数（）{
$（“div.list”）。追加(`
`);
报价行数=报价行数+1；
});
函数CalculateMargin（行）{
var bruttoCalc=0；
var summaCalc=0；
//log（“changing=>”+$（row.data（“temp”））；
变量数量=$（行）.find（“输入[数据目标='行数量']））.val（）；
var pricin=$（行）.find（“输入[data target='row_price_in']）.val（）；
var priceOut=$（行）.find（“输入[data target='row\u price\u out']”）val（）；
var折扣=$（行）.find（“输入[数据目标='行折扣]”）.val（）；
//行计算
var tbSumTotal=0；
var pricinsum=（数量*价格单位）；
var priceOutSum=（数量*价格）；
var折扣总额=（（priceOutSum/100）*折扣）；
var totalSum=（priceOutSum折扣总额）；
//TB计算
var tbDiscount=（（数量*价格）*（折扣/100））；
var tbSum=（（数量*价格）-TB折扣）；
变量tbTotal=（tbSum-（数量*价格））；
如果（！tbTotal | |！isFinite（tbTotal））{
tbTotal=0；
}
TBSUMTOAL=（TBSUMTOAL+（tbSum-（数量*价格））；
//百分比计算
var marginRawPercentage=（tbTotal/（数量*价格））；
var保证金百分比=数学四舍五入（解析浮点数（tbTotal/tbSum）*100）；
如果（！marginPercentage | |！isFinite（marginPercentage））{
边际百分比=0；
}
//显示结果
$（行）.find（“输入[data target='row_margin']”）.val（parseFloat（tbSum-（数量*价格））.toFixed（2）.替换（“.”、“，”）+”）（“+marginPercentage+”）”）；
$（行）.find（“input[data target='row_sum']”）.val（parseFloat（priceOutSum discountSum）.toFixed（2）.替换（“.”，“，”）））；
}
div.section\u按钮{
背景色：#ffffff；
宽度：自动；
浮动：对；
填充：8px 12px；
利润率：0.7px；
边框：1px实心#F2F2；
边界半径：3px；
颜色：#808080；
字体系列：“源Sans-Pro”，无衬线；
字号：9pt；
字号：500；
光标：指针；
-webkit过渡：所有0.2秒轻松；
-moz转换：所有0.2s的易用性；
-ms转换：所有0.2s的易用性；
-o型过渡：所有0.2s的缓变；
过渡：所有0.2秒缓解；
}
div.section_按钮：悬停，div.section_按钮：焦点{
大纲：无；
背景色：#fbfb；
边框：1px实心#ececec；
}
div.section_按钮。彩色{
背景色：#305286；
边框：1px实心#305286；
颜色：#ffffff；
-webkit过渡：所有0.2秒轻松；
-moz转换：所有0.2s的易用性；
-ms转换：所有0.2s的易用性；
-o型过渡：所有0.2s的缓变；
过渡：所有0.2秒缓解；
}
div.section_按钮。彩色：悬停，div.section_按钮。彩色：焦点{
大纲：无；
背景色：#203b64；
边框：1px实心#203b64；
}
桌子{
利润率：15px0；
}
div.list_row>表格{
保证金：0；
}
表thead th{
背景色：#ffffff；
字体系列：“源Sans-Pro”，无衬线；
字号：9pt；
字号：600；
颜色：#404040；
填充：20px 10px 16px 10px；
边框：1px实心#F2F2；
左边框：0；
右边界：0；
}
表THAD th：第一个孩子{
边界半径：3px 0 3px；
左边框：1px实心#F2F2；
}
表THAD th：最后一个孩子{
边界半径：0 3px 3px 0；
右边框：1px实心#f2f2；
}
表THAD tr th输入[类型=“复选框”]{
边际：2px0；
填充：0；
}
div.list_row>表tbody td{
背景色：#ffffff；
字体系列：“源Sans-Pro”，无衬线；
字号：9pt；
字号：500；
颜色：#808080；
填充：0；
光标：指针；
-webkit过渡：所有0.2秒轻松；
-moz过渡：全部
$("div.section_button[data-action='new-offer-row']").click(function(){
    $("div.list").append('<div class="container list_row mt3 w-100 zoomInDown animated fast" data-temp="'+offer_rows_i+'"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tbody><tr><td valign="top" align="left" width="9.5%"><input type="text" data-target="" autocomplete="none"></td><td valign="top" align="left" width="17%"><textarea data-target=""></textarea></td><td valign="top" align="left" width="10%"><input type="text" data-target="" autocomplete="none" value="1"></td><td valign="top" align="left" width="12.5%"><input type="text" data-target="" autocomplete="none" value="0,00"></td><td valign="top" align="left" width="12.5%"><input type="text" data-target="" autocomplete="none" value="0,00"></td><td valign="top" align="left" width="12.5%"><input type="text" data-target="" autocomplete="none"></td><td valign="top" align="left" width="12.5%"><input type="text" data-target="" autocomplete="none" value="0,00 (0%)" readonly="readonly"></td><td valign="top" align="left" width="10%"><input type="text" data-target="" autocomplete="none" value="0,00" readonly="readonly"></td><td valign="top" align="center" width="3.5%"><i class="fas fa-times" data-action="delete-row"></i></td></tr></tbody></table></div>');

    offer_rows_i = offer_rows_i + 1;

    // register and enable event for new row
    $("div.list div.list_row table").on('keyup change', function(){
        // test if the event is triggered
        alert ("altered");
        //CalculateMargin();
    });
});