JQuery

Question

我创建了一个函数，可以在有人单击按钮时进行克隆。在这个 div 中，有一个简单的计算函数。 calculate() 函数在原始 div 中运行良好，但克隆不执行计算。我假设这是因为克隆没有创建我的函数所需的 id。有没有办法让我的函数在克隆的 divs 中工作？我很困惑，不确定从这里去哪里。

---此外，我不确定为什么计算函数在 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>

Answer 1

您需要以不同的方式进行计算。我用 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>

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

JQuery - Multiplication inside new clone doesn't work

clone