克隆格與新計算器的新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
• 更新了相對於當前輸入的目標元素的計算函數