JQuery - динамическое добавление CSS в HTML (головоломка)

Question

У меня есть "добавить другое поле" для пользователя на тот случай, если ему нужно добавить больше ингредиентов. Это поле динамически добавляется через 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 автоматически в динамически создаваемое поле так же, как оно добавляется в поле по умолчанию? Спасибо, что прочитали длинный вопрос.

Answer 1

Вы определенно используете jQuery UI selectmenu для стилизации выпадающих меню, которые отвечают за добавление дополнительных div и span поверх select. Когда вы добавляете новые строки в форму, selectmenu не инициализирует их. Вы должны повторно инициализировать selectmenu после добавления новой строки.