select not working after .clone

Я клонирую блок HTML и добавляю его в div.select not working after .clone

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

HTML-код содержит форму, и по какой-либо причине поля выбора не обновляют значения во вновь клонированном HTML. Если я попытаюсь обновить исходное значение поля выбора, он будет работать. Я просто не работаю с недавно клонированной формой.

Я заверил, что вновь созданна коробки имеют уникальный идентификатор, имя и т.д. Это, как я это делаю:

// 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" не используется повторно? Как ? Код, который мы видим, приведет к дублированию идентификатора. –

Ok так, как это получается. Я использовал плагин под названием Uniform. Униформа не очень хорошо работает с клонированием. Это то, что я должен был сделать, чтобы исправить это.

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

Ссылка (ы):

источник

2013-05-21 18:12:38

Я также была проблема с равномерной и клонирования, шахта была с флажком, который действовал weird после клонирования, и что я сделал, чтобы исправить это было использование единообразного «восстановления», которое в основном remo Все равно, я клонировал то, что мне пришлось клонировать, и снова использовал форму. Наверное, я мог бы использовать восстановление только для элемента исходного элемента клона, если бы захотел, а не удалять из всех (не проверял).

Так что в конечном итоге глядя, как это:

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

select not working after .clone

ответ

Смежные вопросы