.clone之后选择不工作 [英] select not working after .clone
本文介绍了.clone之后选择不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在克隆HTML块，然后将其附加到div.
I am cloning a block of HTML and then appending it to a div.
var part = $('#parts_tpl').clone();
$('#parts_tpl').after(part);
HTML包含一个表单，由于某种原因，选择框未更新新克隆的HTML中的值.如果我尝试更新原始的选择框值，则可以使用.我只是不使用新克隆的表单.
The HTML contains a form and for some reason, the select boxes are not updating there values in the newly cloned HTML. If I try to update the original select box value, it works. I just doesn't work with the newly cloned form.
我确保新创建的选择框具有唯一的ID，名称等.这就是我的做法:
I have ensured that the newly created select boxes have a unique id, name, etc. This is how I'm doing 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); }
});
这是我的HTML外观:
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 <span class="required"> </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) <span class="required"> </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) <span class="required"> </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 <span class="required"> </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 <span class="required"> </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 whats going on?
我尝试过的事情:
- 克隆未克隆选择值
- https://github.com/spencertipping/jquery.fix.select-clone/blob/master/jquery.fix.select-clone.js
- Clone isn't cloning select values
- https://github.com/spencertipping/jquery.fix.select-clone/blob/master/jquery.fix.select-clone.js
推荐答案
确定.我正在使用名为 Uniform 的插件.制服在克隆选择中不能很好地发挥作用.这是我必须解决的问题.
Ok so as it turns out. I was using a plugin called Uniform. Uniform does not play well with selects being cloned. This is what I had to do to fix it.
// fix uniform to update properly on cloned elements
$('select').change(function() {
$.uniform.update('#' + $(this).attr('id'));
});
参考文献:
- Change Select value using jQuery Uniform.js
- jquery cloning a block of element. select element acting weired
这篇关于.clone之后选择不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
