JQuery - 新克隆中的乘法不起作用

时间：2016-01-14 20:51:45

标签： jquery clone

Fiddle

我创建了一个在有​​人点击按钮时克隆的功能。在这个div中，有一个简单的计算功能。 calculate（）函数在原始div中可以正常工作，但是克隆不会执行计算。我假设它是因为克隆在我的功能中不需要创建id。有没有办法让我的功能在克隆的div中工作？我很难过，不知道从哪里开始。

---另外，我不确定为什么计算功能在小提琴中根本不起作用，它在其他任何地方都能正常工作。

＆＃13;
＆＃13; 
$(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;


}
＆＃13; 
/* 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;
}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您需要以不同方式进行计算。我通过在类而不是元素上使用监听器来实现jQuery。

JSFiddle 

$(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
  });

  $('.input').on('input', function() {
    $(this).parent().children('#grouptotal').val($(this).val() * $(this).parent().children('#input2').val());
  });

  $('.input2').on('input', function() {
    $(this).parent().children('#grouptotal').val($(this).val() * $(this).parent().children('#input').val());
  });

});
/* 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" />

    <label class="gcLabel">System Price:</label>
    <input class="input2" id="input2" type="text" />

    <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>

相关问题
最新问题