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>