jQuery克隆和附加但保留复制脚本的功能

Question

我的困境是我无法弄清楚如何在复制表格的同时将我的算术保留在表格的克隆副本中。我非常感谢任何关于哪种方法最有效的见解？

$(document).ready(function() {
  $("#add2").click(function() {
    $("#clone").clone().appendTo("body");
  });
});

$(document).ready(function() {
  var basePrice = 6.25;
  $(".calculate").change(function() {
    newPrice = basePrice;
    $(".calculate option:selected").each(function() {
      newPrice += Number($(this).data('price'));
    });
    $("#item-price").html(newPrice.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="clone">
  <fieldset id="fspace2">
    <legend>Project Details</legend>


    <table>
      <tr>
        <td style="padding-bottom:1em;">
          <label for="title">Title:</label>
          <input type="text" name="title" id="title">
        </td>
        &ensp;
        <td style="padding-bottom:1em;">
          <label for="title">Price:</label>
          <span id="item-price" </span>
          <br />
        </td>
      </tr>
    </table>

    <table id="line">
      <tr>
        <td class="titlecust" style="text-align: center; width:2em;">Options &amp; Packages</td>

      </tr>
      <tr>
        <td class="cellspace">
          <!--**OPT - Come back to fix spacing-->
          <br />
          <select class="form-control calculate" id="try" name="try">
          <option data-price="0" value="select">Select an Option</option>
          <option data-price="208" value="logo1">cookies</option>
          <option data-price="650" value="bro">pizza</option>
          <option data-price="400" value="web1">brownies</option>
          <option data-price="N/A" value="oth">Other</option>
          </select><br /><br />

          <select class="form-control calculate" id="packaging" name="packaging">
            <option data-price="0" value="standard">Choose a Package</option>
            <option data-price="322.20" value="shrink">Pink</option>
            <option data-price="659.70" value="shrink">Blue</option>
          </select><br />
        </td>
    </table>
  </fieldset>
  <br />

  <button id="add2">Clone Stuff</button>

Answer 1

使用.clone(true)、true 表示事件处理程序应与元素一起复制。

$("#clone").clone(true).appendTo("body")

---

这将创建重复的标识符，因此会使 HTML 无效并且所需的功能将不起作用。

在下面的 sn-p 中，我使用类选择器来绑定事件处理程序和 DOM 关系以获得所需的结果。

$(document).ready(function() {
  $(".add2").click(function() {
    $(".clone").clone(true).appendTo("body");
  });
  
  var basePrice = 6.25;
  $(".calculate").change(function() {
    var $this = $(this);
    newPrice = basePrice;
    $("option:selected", $this).each(function() {
      newPrice += Number($(this).data('price'));
    });
    $this.closest('table').prev('table').find(".item-price").html(newPrice.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="clone">
  <fieldset class="fspace2">
    <legend>Project Details</legend>
    <table>
      <tr>
        <td style="padding-bottom:1em;">
          <label for="title">Title:</label>
          <input type="text" name="title" id="title">
        </td>
        &ensp;
        <td style="padding-bottom:1em;">
          <label for="title">Price:</label>
          <span class="item-price"></span>
          <br />
        </td>
      </tr>
    </table>

    <table id="line">
      <tr>
        <td class="titlecust" style="text-align: center; width:2em;">Options &amp; Packages</td>

      </tr>
      <tr>
        <td class="cellspace">
          <!--**OPT - Come back to fix spacing-->
          <br />
          <select class="form-control calculate" id="try" name="try">
          <option data-price="0" value="select">Select an Option</option>
          <option data-price="208" value="logo1">cookies</option>
          <option data-price="650" value="bro">pizza</option>
          <option data-price="400" value="web1">brownies</option>
          <option data-price="N/A" value="oth">Other</option>
          </select><br /><br />

          <select class="form-control calculate" id="packaging" name="packaging">
            <option data-price="0" value="standard">Choose a Package</option>
            <option data-price="322.20" value="shrink">Pink</option>
            <option data-price="659.70" value="shrink">Blue</option>
          </select><br />
        </td>
    </table>
  </fieldset>
  <br />

  <button class="add2">Clone Stuff</button>