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

标签 javascript jquery html

我有一个有效的文本框乘法,但是,当我添加一个新文本框时,该功能将不会执行。我制作的 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,

尼米兹

最佳答案

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

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

此处已更新 JSFiddle

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

更新

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

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

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

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

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

我会用第二个

关于javascript - 动态元素的文本框事件处理程序的 jQuery 乘法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26162357/

相关文章:

javascript - 如何用javascript抓取HTML表格内容?

javascript - 使用 Javascript 我希望能够在特定时间运行特定任务

javascript - 在 IE9 的每个打印页面上保留标题

javascript - 如何通过滑动范围 slider 来改变图像?

javascript - 尝试运行 AudioContext.createMediaElementSource() 时如何修复 "Audion could not identify the object calling ' connect'"错误?

jquery - 将导航栏品牌和链接与 Bootstrap 4 中的页面内容对齐

java.util.calendar api 的 javascript 实现

javascript - 我的输入字段听到每个 "keydown"事件,但输入。我有一个日期选择器,但不确定发生了什么

javascript - 触发事件(jQuery)后如何恢复为 HTML/DOM 中的默认值?

html - 无法将 div 设置为 100% 高度?