.clone 后选择不工作答案

【问题标题】：select not working after .clone.clone 后选择不工作
【发布时间】：2013-12-05 19:35:28
【问题描述】：

我正在克隆一个 HTML 块，然后将它附加到一个 div。

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>

有人知道怎么回事吗？

我尝试过的事情：

【问题讨论】：

你能说明你是如何更新它们的吗？我怀疑它的克隆是问题所在。
您确保“parts_tpl” id 没有被重复使用吗？如何？我们看到的代码会产生重复的 id。
@dystroy 是的，我确保增加了 parts_tpl。凯文，我用我如何更新 id 和名称更新了我的问题。
@Gabe 我已经添加了我的标记。
duplicate question

标签： jquery

【解决方案1】：

好吧，事实证明。我正在使用一个名为Uniform 的插件。 Uniform 在克隆选择时效果不佳。这是我必须做的来修复它。

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

参考文献：

【讨论】：

【解决方案2】：

我也遇到了统一和克隆的问题，我的复选框在克隆后表现得很奇怪，我解决它的方法是使用统一“恢复”，它基本上从所有元素中删除统一，然后我克隆了我必须克隆并重新应用制服。我想如果我愿意的话，我可以只对单个克隆源元素使用还原，而不是从所有元素中删除（没有检查）。

所以它最终看起来像这样：

$.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

希望这对某人有所帮助。

【讨论】：