【发布时间】：2016-01-14 20:51:45
【问题描述】：
我创建了一个函数，当有人单击按钮时会进行克隆。在这个 div 里面，有一个简单的计算函数。 calculate() 函数将在原始 div 中正常工作，但克隆不执行计算。我假设这是因为克隆没有在我的函数中创建所需的 id。有没有办法让我的函数在克隆的 div 中工作？我很困惑，不知道从这里去哪里。
---另外，我不确定为什么计算函数在 Fiddle 中根本不起作用，它在其他任何地方都可以正常工作。
$(document).ready(function() {
$("button").click(function() {
var target = $(this).closest(".groupcontainer"); // create var to clone
target.clone(true, true).insertAfter(target); // clone and insert after
});
});
function calculate() {
var myBox1 = document.getElementById('input').value;
var myBox2 = document.getElementById('input2').value;
var grouptotal = document.getElementById('grouptotal');
var myResult = myBox1 * myBox2;
grouptotal.value = myResult;
}/* begin the group container with all the elements*/
.groupcontainer {
width: 650px;
background-color: white;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.behindgroup {
background-color: black;
width: 650px;
height: 30px;
}
.group {
font-family: Arial;
margin-right: 20px;
font-size: 12px;
float: left;
background-color: black;
padding: 2px;
color: white;
clear: both;
display: inline-block;
}
.quantity {
font-family: Arial;
font-size: 12px;
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
}
.system {
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
font-family: Arial;
font-size: 12px;
}
.total {
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
font-family: Arial;
font-size: 12px;
}
.specs {
float: left;
width: 648px;
min-height: 50px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
clear: both;
}
.specs table {
width: 650px !important;
}
.specs table tr {
background-color: white !important;
}
.specs table tr td {
font-family: Arial !important;
font-size: 9px !important;
padding: 0px !important;
margin: 0px !important;
color: black !important;
border-bottom: 1px solid black;
}
.specs table tr td span {
color: black !important;
font-family: Arial !important;
font-size: 9px !important;
padding: 0px !important;
margin: 0px !important;
}
.sa {
height: 50px;
background-color: black;
clear: both;
color: white;
text-align: center;
font-family: Arial;
font-size: 14px;
}
.sapricing {
background-color: white;
border-bottom: 1px solid black;
float: left;
height: 20px;
width: 24.6%;
text-align: center;
}
#terms {
font-family: Arial;
font-size: 10px;
list-style-type: none;
padding: 0px;
text-align: center;
}
.quantity1 {
width: 5px;
font-family: Arial;
font-size: 12px;
}
.systemprice {
width: 113px;
font-family: Arial;
font-size: 12px;
}
.grouptotal {
font-family: Arial;
font-size: 12px;
width: 120px;
}
.group_1 {
font-family: Arial;
font-size: 12px;
width: 25px;
}
.gcLabel {
width: 20%;
color: white;
font-family: Arial;
font-size: 12px;
}
.input {
width: 10%;
font-family: Arial;
font-size: 12px;
}
.input2 {
width: 20%;
font-family: Arial;
font-size: 12px;
}
#quantity {
width: 10%;
font-family: Arial;
font-size: 12px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Begin the group sections-->
<div class="groupcontainer">
<div class="behindgroup">
<label class="gcLabel">Group:</label>
<input class="group_1" type="text" />
<label class="gcLabel">Quantity:</label>
<input class="input" id="input" type="text" oninput="calculate()" />
<label class="gcLabel">System Price:</label>
<input class="input2" id="input2" type="text" oninput="calculate()" />
<label class="gcLabel">Group Total:</label>
<input class="grouptotal" id="grouptotal" />
</div>
<!--begin the specs here-->
<div class="specs">
<button>Clone groupcontainer and its children</button>
</div>
</div>【问题讨论】：
-
您的代码应始终首先出现在您的问题中，其次是指向非现场资源的链接。系统警告您不要在您的问题中发布任何实际代码的 jsFiddle.net 链接，但您选择尝试通过突出显示随机文本位作为代码来规避该警告。请按照你的要求去做。