Question

我正在克隆一个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>

有谁知道最近发生了什么？

我尝试过的事情：

Answer 1

好的，事实证明。我使用的是名为Uniform的插件。制服不能很好地克隆选择。这是我必须要解决的问题。

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

<强>参考（S）：

Answer 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

希望这有助于某人。

.clone之后选择不工作

2 个答案: