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>');

すべてうまく機能しますが、テンプレートがレンダリングされると、次のようにフォーマットが少しずれます。 ここに画像の説明を入力

これは、レンダリングされたテンプレートがテンプレートにないスパンと 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 を自動的に追加する方法はありますか? 長い質問を読んでくれてありがとう。

4

1 に答える 1

0

スタイルアップ ドロップダウンにjQuery UI selectmenuを確実に使用しています。これは、select の上に追加の div と span を追加する責任があります。フォームに新しい行を追加するとき、selectmenu はそれらを初期化していません。新しい行を追加した後、selectmenu を再初期化する必要があります。

于 2015-08-20T23:29:17.350 に答える