克隆格与新计算器的新divs

Question

我有一些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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="clonedInput1" class="clonedInput"> 
 
    <input type="text" class="calculate" id="cabwidth" placeholder="Cabinet Width"> 
 
    <div id="sum" /> 
 
    <div class="actions"> 
 
    <button class="clone">Add</button> 
 
    <button class="remove">Remove</button> 
 
    </div> 
 
</div>

下面是一个例子的jsfiddle：jsfiddle

Answer 1

您的按钮得到删除，因为他们的父母<div>有其内容覆盖（由于您的无效语法）。您正尝试使用<div id="sum" />自行关闭sum<div>。

该<div>元素不能自我封闭，因为它不是一个void element;您必须明确声明该元素为空，并使用<div id="sum"></div>。进行此更改可以解决按钮消失的问题。

请注意，您可以使用W3C validation service验证您的HTML标记，以确保您的HTML有效（因此其行为方式与预期相同）。另请注意，从jQuery 3.0开始已弃用.bind();您应该使用.on()。

至于你克隆不工作，这是由于两方面的原因：

• 第一个是，你是基于ID克隆，从而复制ID。整个DOM中的ID必须为唯一。使用类而不是ID，并使用$(this)来引用特定的克隆元素。
  1. 变化#sum到.sum和，而不是$("#sum").text(value)，使用 $(this).parent().find(".sum").text(value)只影响 正确的元素。
  2. 更改var cabwidth = parseFloat($("#cabwidth").val()) || 0至var cabwidth = parseFloat($(this).val()) || 0。
  3. 删除所有使用的ID以确保克隆后有效的标记。
• 其次是事件处理程序不会附加到克隆元素。您需要将范围提升为DOM负载上可用的元素，并使用event delegation。而不是$(".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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="clonedInput"> 
 
    <input type="text" class="calculate" placeholder="Cabinet Width"> 
 
    <div class="sum"></div> 
 
    <div class="actions"> 
 
    <button class="clone">Add</button> 
 
    <button class="remove">Remove</button> 
 
    </div> 
 
</div>

希望这有助于！ :)

Answer 2

Here is an updated jsFiddle.

什么我改变了一些注意事项：

• .bind()折旧
• 附变化/ KEYUP该文件，然后通过.calculate作为选择，这将与动态元素，而之前它不是
• 确保每个克隆和子元素都有唯一的ID
• 更新了相对于当前输入的目标元素的计算函数