0

我有一个“添加另一个字段”供用户使用，以防他们需要添加更多成分。该字段通过 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 类，但我猜它会自动添加，而在添加动态字段时它确实添加了相同的 span； 默认渲染字段的 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，就像在默认字段中添加一样？感谢您阅读长问题。

4

1 回答 1

0

您肯定在使用jQuery UI 选择菜单来设置样式下拉菜单，它负责在选择的顶部添加额外的 div 和 span。当您将新行添加到表单中时，选择菜单不会对其进行初始化。添加新行后，您应该重新初始化选择菜单。

于 2015-08-20T23:29:17.350 回答