用于动态元素的文本框事件处理程序的jQuery乘法

时间:2014-10-02 13:52:53

标签: javascript jquery html5

我有一个文本框的工作乘法,但是,当我添加一个新文本框时,该函数将不会执行。只有第一个文本框正在执行我所做的js函数。很抱歉问这个,但我对jsquery / javascript很新。

这是我的工作脚本:JS FIDDLE

What it does is, I have a table and 2 TR on it. it multiply the cost(3rd td) and the quantity(fourth td) and send the results to the line total (fifth td). Then I have a button, that will add another set of tr to the existing table, however, the multiplication wont work on the newly added tr.

你能帮助我吗?

TIA,

尼米兹

1 个答案:

答案 0 :(得分:1)

只需将这两行添加为.click(...)处理程序的最后两行:

$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);

此处已更新JSFiddle

原因是 - 您必须为新创建的行重新注册事件侦听器。 你可以使用相同的选择器,但是你必须关闭"关闭"以前的事件听众。

<强>更新

另一种方法是,您只能在新创建的行上绑定事件: 这是另一个JSFiddle for that

您必须将新创建的行的内容放入某个变量中:

$('#myinvoice tr:last').after($newRow = $('<tr><td>...'));

然后仅在$ newRow中为选择器添加事件:

$(".qty :input",$newRow).keyup(byPrice);
$(".price :input",$newRow).keyup(byQty);

我使用第二个