Geek asks and answers

Choose not to work after .clone

I clone an HTML block and add it to the div.

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

HTML contains a form and, for some reason, the select boxes do not update the values ​​in the newly cloned HTML. If I try to update the original value of the selection field, it will work. I just do not work with the recently cloned form.

I made sure that the newly created selection cells have a unique identifier, name, etc. Here is how I do it:

// 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); }
    });

This is what my HTML looks like:

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

Does anyone know what is going on?

What I tried:

0
source share
2 answers

, . Uniform. . , , .

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

():

0

, , , , , "", , , , . , , ( ).

, :

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

, -.

0

More articles:


All Articles