選擇不工作後.clone

我克隆了一塊HTML，然後將它附加到一個div。選擇不工作後.clone

var part = $('#parts_tpl').clone(); 
$('#parts_tpl').after(part);

HTML包含一個表單，並且由於某種原因，選擇框在新克隆的HTML中沒有更新那裏的值。如果我嘗試更新原始選擇框的值，它將起作用。我只是不適用於新克隆的表單。

我已經確保新創建的選擇框有一個唯一的ID，名稱等，這是我如何做它：

// increment ids and names for select tags 
    $('#' + content.attr('id')).find('select').each(function() { 
     var id = $(this).attr('id') + partID; 
     var name = $(this).attr('name') + partID; 

     if ($(this).attr('id')) { $(this).attr('id', id); } 
     if ($(this).attr('name')) { $(this).attr('name', name); } 
    });

這是我的HTML是什麼樣子：

<div class="parts" id="parts_tpl"> 
    <fieldset> 
     <label>Part Specifications</label> 
     <a href="#" class="btn removePartBtn" id="removePartBtn" style="float: right; display: none;">Remove Part</a> 
     <section> 
     <label for="quote_partSpecification_description">Description&nbsp;<span class="required">&nbsp;</span></label> 
     <div> 
      <input type="text" id="quote_partSpecification_description" name="quote_partSpecification_description" required="" class="text"> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_estimatedFirstYearVolume">Estimated Year 1 Volume (mft)&nbsp;<span class="required">&nbsp;</span></label> 
     <div> 
      <!-- 
       <input type="text" id="quote_partSpecification_estimatedFirstYearVolume" name="quote_partSpecification_estimatedFirstYearVolume"> 
       --> 
      <input id="quote_partSpecification_estimatedFirstYearVolume" name="quote_partSpecification_estimatedFirstYearVolume" type="number" class="integer" required=""> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_estimatedSecondYearVolume">Estimated Year 2 Volume (mft)&nbsp;<span class="required">&nbsp;</span></label> 
     <div> 
      <!-- 
       <input type="text" id="quote_partSpecification_estimatedSecondYearVolume" name="quote_partSpecification_estimatedSecondYearVolume"> 
       --> 
      <input id="quote_partSpecification_estimatedSecondYearVolume" name="quote_partSpecification_estimatedSecondYearVolume" type="number" class="integer" required=""> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_estimatedOrderVolume">Estimated Order Volume (mft)</label> 
     <div> 
      <!-- 
       <input type="text" id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume"> 
       --> 
      <input id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume" type="number" class="integer"> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_partType">Part Type&nbsp;<span class="required">&nbsp;</span></label> 
     <div> 
      <div class="selector" id="uniform-quote_partSpecification_partType"> 
       <span>Frame</span> 
       <select name="quote_partSpecification_partType" id="quote_partSpecification_partType" required="" style="opacity: 0;"> 
        <optgroup label="Select Part Type"> 
        <option value="Frame">Frame</option> 
        <option value="Sash">Sash</option> 
        <option value="Single Wall Accessory">Single Wall Accessory</option> 
        <option value="Hollow Accessory">Hollow Accessory</option> 
        </optgroup> 
       </select> 
      </div> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_weightPerFoot">Weight per ft</label> 
     <div> 
      <!-- 
       <input type="text" id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume"> 
       --> 
      <input id="quote_partSpecification_weightPerFoot" name="quote_partSpecification_weightPerFoot" type="number" class="decimalToTenThousands g2"> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_dieNumber">Die Number (<em>if existing</em>)</label> 
     <div> 
      <input type="text" id="quote_partSpecification_dieNumber" name="quote_partSpecification_dieNumber" class="text"> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_plantToProducePart">Plant to Product Part&nbsp;<span class="required">&nbsp;</span></label> 
     <div> 
      <div class="selector" id="uniform-quote_partSpecification_plantToProducePart"> 
       <span>Plant 1</span> 
       <select name="quote_partSpecification_plantToProducePart" id="quote_partSpecification_plantToProducePart" required="" style="opacity: 0;"> 
        <optgroup label="Select Plant"> 
        <option value="Plant 1">Plant 1</option> 
        <option value="Plant 2">Plant 2</option> 
        <option value="Plant 13">Plant 13</option> 
        <option value="Plant 14">Plant 14</option> 
        <option value="Bristol">Bristol</option> 
        <option value="To Be Determined">To Be Determined</option> 
        </optgroup> 
       </select> 
      </div> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_packaging">Packaging</label> 
     <div> 
      <div class="selector" id="uniform-quote_partSpecification_packaging"> 
       <span>Metal Rack</span> 
       <select name="quote_partSpecification_packaging" id="quote_partSpecification_packaging" style="opacity: 0;"> 
        <optgroup label="Select Packaging"> 
        <option value="Metal Rack">Metal Rack</option> 
        <option value="Wood Rack">Wood Rack</option> 
        <option value="Paperboard">Paperboard</option> 
        <option value="Polybag">Polybag</option> 
        <option value="Other">Other</option> 
        <option value="Customer Supplied Rack">Customer Supplied Rack</option> 
        </optgroup> 
       </select> 
      </div> 
     </div> 
     </section> 
     <section> 
     <label for="quote_partSpecification_cutLength">Cut Length (in)</label> 
     <div> 
      <!-- 
       <input type="text" id="quote_partSpecification_cutLength" name="quote_partSpecification_cutLength"> 
       --> 
      <input id="quote_partSpecification_cutLength" name="quote_partSpecification_cutLength" type="number" class="integer"> 
     </div> 
     </section> 
    </fieldset> 
</div>

有誰知道最近怎麼回事？

事情我已經嘗試：

來源

2013-05-21 Farhan Ahmad

你能展示你如何更新它們嗎？我懷疑克隆是問題出在哪裏。 –

分享一些標記 – Gabe

您確定「parts_tpl」ID沒有被重複使用嗎？怎麼樣？我們看到的代碼會產生重復的ID。 –

好了，所以事實證明。我正在使用一個名爲Uniform的插件。制服與克隆選擇不一致。這是我必須要解決的問題。

// fix uniform to update properly on cloned elements 
$('select').change(function() { 
    $.uniform.update('#' + $(this).attr('id')); 
});

參考（S）：

來源

2013-05-21 18:12:38

我還與均勻和克隆的問題，我的是用其作用的複選框克隆後奇怪，我做了什麼來解決它是使用統一的「恢復」，基本上刪除然後我克隆了我必須克隆的東西，然後重新應用統一。我想我可以在單個克隆源元素上使用恢復，如果我想從所有刪除（不檢查）。

所以它結束了看起來像這樣：

$.uniform.restore($("select, input:checkbox, input:radio, input:file")); // remove uniform effects 
var clonedItem = $("#originalItem").clone(); // clone and add 
$("body").append(clonedItem); 
$("select, input:checkbox, input:radio, input:file").uniform(); // restore uniform

希望這可以幫助別人。

來源

2013-12-05 11:35:28 TheZuck

選擇不工作後.clone

回答

相關問題