Javascript 使用新计算器克隆div以获得新div

我有一些Jquery，我正在使用它来克隆一个div，div中有一个进行计算的输入

克隆div并创建新div时，新div的计算不起作用。我知道，计算只在我写的方式下有效。我已经找过了，但找不到我要找的东西

我也有一个问题，当我在输入中添加一个数字时，第一个div的计算工作正常，但它也删除了我的按钮

如何对每个新克隆的div进行新计算？ 如何停止删除添加/删除按钮的计算

函数克隆（）{
$（this.parents（“.clonedInput”）.clone（）
.附件（“正文”）
.attr（“id”、“克隆输入”+克隆索引）
.find（“*”）
.each（函数（{
var id=this.id | |“”；
var match=id.match（正则表达式）| |[]；
如果（match.length==3）{
this.id=匹配[1]+（克隆索引）；
}
})
.on（'click'、'button.clone'，clone）
.on（'click'，'button.remove'，'remove'）；
克隆索引++；
}
函数删除（）{
$（this.parents（“.clonedInput”）.remove（）；
}
$（“button.clone”）。单击（“单击”，克隆）；
$（“button.remove”）。单击（“单击”，删除）；
//计算器
$（文档）.ready（函数（）{
$（“.calculate”）.bind（“键控更改”，函数（e）{
var cabwidth=parseFloat（$（“#cabwidth”）.val（））| 0；
var-ply=1.4375；
var值=电缆宽度-铺层；
如果（！isNaN（值）&&value！==无穷大）{
$（“#总和”）。文本（值）；
}
});
});
正文{
填充：10px；
}
.克隆输入{
填充：10px；
边界半径：5px；
背景色：#def；
边缘底部：10px；
}
.clonedInput div{
保证金：5px；
}

添加
去除
您的按钮被删除，因为它们的父按钮的内容被覆盖（由于您的语法无效）。您正试图使用
自动关闭您的
总和

元素不能自动关闭，因为它不是一个；必须使用
明确声明元素为空。进行此更改可以解决按钮消失的问题

请注意，您可以使用验证HTML标记，以确保HTML是有效的（从而以预期的方式运行）。还请注意，从jQuery 3.0开始就不推荐使用；您应该改用

至于你的克隆不起作用，有两个原因：


首先，您是基于ID进行克隆的，因此复制ID。ID在整个DOM中必须是唯一的。使用类而不是ID，并使用
$（this）
引用特定的克隆元素。
将
#sum
更改为
.sum
，并使用
$（“#sum”）。文本（值）
$（this.parent（）.find（“.sum”）.text（value）
仅影响
正确的元素
更改
var宽度=
parseFloat（$（“#cabwidth”）.val（））| 0
to
var cabwidth=
parseFloat（$（this.val（））| | 0
删除所有ID的使用，以确保克隆后的标记有效

第二个原因是事件处理程序不会附加到克隆的元素。您需要将作用域提升到DOM load上可用的元素，并利用。不要使用
$（“.calculate”）.bind（“keyup change”，函数（e）
，而是使用
$（“body”）.on（“keyup change”，“.calculate”，函数（e）

在以下示例中，所有这些都已修复：


函数克隆（）{
$（this.parents（“.clonedInput”）.clone（）
.附件（“正文”）
.find（“*”）
.on（'click'、'button.clone'，clone）
.on（'click'，'button.remove'，'remove'）；
}
函数删除（）{
$（this.parents（“.clonedInput”）.remove（）；
}
$（“button.clone”）。单击（“单击”，克隆）；
$（“button.remove”）。单击（“单击”，删除）；
//计算器
$（文档）.ready（函数（）{
$（“正文”）。关于（“键控更改”，“计算”，函数（e）{
var cabwidth=parseFloat（$（this）.val（））| | 0；
var-ply=1.4375；
var值=电缆宽度-铺层；
如果（！isNaN（值）&&value！==无穷大）{
$（this.parent（）.find（“.sum”）.text（值）；
}
});
})；
正文{
填充：10px；
}
.克隆输入{
填充：10px；
边界半径：5px；
背景色：#def；
边缘底部：10px；
}
.clonedInput div{
保证金：5px；
}

添加
去除

关于我所更改内容的一些注释：


.bind（）
已折旧
将更改/keyup附加到文档，然后作为选择器传递
。calculate
，这将对动态元素起作用，而以前不是
确保每个克隆和子元素具有唯一的ID
更新了calculate函数以相对于当前输入的目标元素
请注意，克隆id为的节点会导致id丢失或无效html（因为id应该是文档唯一的）。此外，克隆节点不会克隆任何事件侦听器；这些侦听器需要重新连接到克隆的节点/sso。我应该改用类吗？对于有效的html，是的。您应该只具有唯一的id。您知道问题的第二部分吗，如何在每个克隆的div中进行计算？或者这是一个不同的任务吗从这篇文章开始？这很好，可以包含在问题中，我已经更新了我的答案，涵盖了所有需要更改以纠正此行为的要点：）