Question

我有一个＆＃34;添加另一个字段＆＃34;对于用户，如果他们需要添加更多的成分。该字段通过jquery动态添加。以下是默认字段的图像和添加此字段的代码;

创建类似的元素以添加其他字段

var element_ing = $('<div class="f-row ingredient">\
                        <div class="medium">\
                            <input type="text"/>\
                        </div>\
                        <div class="quantity">\
                            <input type="text"/>\
                        </div>\
                        <div class="to">to</div>\
                        <div class="quantity">\
                            <input type="text"/>\
                        </div>\
                        <div class="small">\
                            <select id="unit-dyn">\
                            </select>\
                        </div>\
                        <div class="less-medium">\
                            <select id="prep-method-dyn">\
                            </select>\
                        </div>\
                        <button class="remove" id=remove-ing"></button></div>');

一切正常，但是当渲染模板时，格式有点偏，就像这样;

我发现这是因为渲染的模板添加了一个span和div类，它不在模板中，但我想自动添加，而在添加动态字段时添加相同的跨度; 默认渲染字段的HTML

<div class="small" id="unit">

 # the below div gets added automatically
<div class="selector" id="uniform-id_ingredient_set-0-unit" style="width: 90px;">

# the below span gets added automatically 
<span style="width: 76px; -webkit-user-select: none;">Unit</span>

<select id="id_ingredient_set-0-unit" name="ingredient_set-0-unit">
    <option value="" selected="selected">Unit</option>
    <option value="1">mL</option>
</select>
</div>
</div>

动态添加字段的HTML

<select id="unit-dyn">
    <option value="" selected="selected">Unit</option>
    <option value="1">mL</option>
 </select>

添加新字段时，我将默认字段克隆，然后将值附加到新创建的字段。

有没有办法在动态创建的字段中自动添加div和span，就像它在默认字段中添加一样？感谢阅读长期问题。

Answer 1

您肯定使用jQuery UI selectmenu作为样式化下拉列表，它负责在选择之上添加额外的div和span。当您在表单中添加新行时，selectmenu不会初始化它们。添加新行后，您应该重新初始化selectmenu。

jQuery - 动态地将CSS添加到html（令人费解）

1 个答案: