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无效，并且所需的功能将不起作用。

在下面的代码片段中，我使用了类选择器来绑定事件处理程序和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>

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

1 个答案: