0

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>

誰が何が起こっているのか知っていますか？

私が試したこと：

4

2 に答える 2

1

結局のところ、わかりました。Uniformというプラグインを使用していました。ユニフォームは、選択が複製されているとうまく機能しません。これは、それを修正するために私がしなければならなかったことです。

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

参考文献:

于 2013-05-21T18:12:38.477 に答える
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

これが誰かに役立つことを願っています。

于 2013-12-05T11:35:28.500 に答える