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無效，所需的功能將無法正常工作。

在下面我已經使用類選擇器的事件處理程序和用於所希望的結果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>