使用新计算器克隆div为新div

我有一些Jquery用于克隆div，div内部是一个进行计算的输入。

当我克隆div并创建一个新div时，计算对新div不起作用。 我知道计算只能按照我编写的方式进行。 我搜索过，但找不到我要找的东西。

我还有一个问题，当我在输入中添加一个数字时，计算适用于第一个div，但它也会删除我的按钮。

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

function clone() { $(this).parents(".clonedInput").clone() .appendTo("body") .attr("id", "clonedInput" + cloneIndex) .find("*") .each(function() { var id = this.id || ""; var match = id.match(regex) || []; if (match.length == 3) { this.id = match[1] + (cloneIndex); } }) .on('click', 'button.clone', clone) .on('click', 'button.remove', remove); cloneIndex++; } function remove() { $(this).parents(".clonedInput").remove(); } $("button.clone").on("click", clone); $("button.remove").on("click", remove); // calculator $(document).ready(function() { $(".calculate").bind("keyup change", function(e) { var cabwidth = parseFloat($("#cabwidth").val()) || 0; var ply = 1.4375; var value = cabwidth - ply; if (!isNaN(value) && value !== Infinity) { $("#sum").text(value); } }); }); 

 body { padding: 10px; } .clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; } .clonedInput div { margin: 5px; } 

  
  
 
 Add Remove 
  

这是一个jsfiddle示例： jsfiddle

Answer 1

您的按钮被删除，因为它们的父

的内容被覆盖（由于您的语法无效）。 您正尝试使用

自行关闭sum

。

元素不能自动关闭，因为它不是void元素 ; 您必须使用

明确声明该元素为空。 进行此更改可以解决按钮消失的问题。

请注意，您可以使用W3Cvalidation服务validationHTML标记，以确保您的HTML有效（因此行为符合预期）。 另请注意，自jQuery 3.0起，不推荐使用.bind() ; 你应该使用.on()代替。

至于你的克隆无法正常工作，原因有两个：

• 第一种是基于ID进行克隆，从而复制ID。 ID在整个DOM中必须是唯一的。 使用类而不是ID，并使用$(this)来引用特定的克隆元素。
  1. 将.sum更改为.sum ，而不是$("#sum").text(value) ，使用$(this).parent().find(".sum").text(value)只影响正确元件。
  2. 更改var cabwidth = parseFloat($("#cabwidth").val()) || 0 var cabwidth = parseFloat($("#cabwidth").val()) || 0到var cabwidth = parseFloat($(this).val()) || 0 var cabwidth = parseFloat($(this).val()) || 0 。
  3. 删除所有ID的使用以确保克隆后的有效标记。
• 第二个是事件处理程序没有附加到克隆元素。 您需要将范围提升到DOM加载上可用的元素，并使用事件委派 。 而不是$(".calculate").bind("keyup change", function(e) ，使用$("body").on("keyup change", ".calculate", function(e) 。

以下示例中已修复此问题：

 function clone() { $(this).parents(".clonedInput").clone() .appendTo("body") .find("*") .on('click', 'button.clone', clone) .on('click', 'button.remove', remove); } function remove() { $(this).parents(".clonedInput").remove(); } $("button.clone").on("click", clone); $("button.remove").on("click", remove); // calculator $(document).ready(function() { $("body").on("keyup change", ".calculate", function(e) { var cabwidth = parseFloat($(this).val()) || 0; var ply = 1.4375; var value = cabwidth - ply; if (!isNaN(value) && value !== Infinity) { $(this).parent().find(".sum").text(value); } }); }); 

 body { padding: 10px; } .clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; } .clonedInput div { margin: 5px; } 

  
  
 
 Add Remove 
  

Answer 2

这是一个更新的jsFiddle。

关于我改变的一些注意事项：

• .bind()已折旧
• 将更改/ .calculate附加到文档，然后传递.calculate作为选择器，这将使用动态元素，而在它之前
• 确保每个clone和child元素都有唯一的ID
• 将计算函数更新为相对于当前输入的目标元素