2

いくつかのフィールドがあり、さらにいくつかがjqueryによって生成されたフォームがあります。問題は、新しいものが既存のものと一致しないことです。CSSをいじってみましたが、うまくいきませんでした。これはまさにこの男の問題ですが、彼は応答を受け取りませんでした：

https://stackoverflow.com/questions/9218225/dynamically-generated-jquery-table-row-not-aligning-correctly

これは私のフォームです：

<form id="recipe" name="recipe" action="create.php" method="post">
    <h2>Ingredients</h2>
    <div id="labels">            
        <label class="label" for="quantity">Quantity:</label>
        <label class="label" for="unit">Unit:</label>
        <label class="label" for="ingredient">Ingredient:</label>
    </div>

    <div id="inputs">
        <div class="fields">
            <input class="quantity" name="quantity[]" type="text" />
            <input class="unit" name="unit[]" type="text" />
            <input class="ingredient" name="ingredient[]" type="text" />
        </div>
    </div>

    <div id="container">
      <a id="add" href="#"><span>» Add ingredient.</span></a>
   </div>              

   <div>
        <h2>Directions</h2>
        <textarea name="preparacion" rows="10" cols="51"></textarea>
    </div>

    <input type="submit" value="Guardar" />
    <input type="reset" value="Limpiar" />
</form>

そして、これは私が追加のフィールドを生成するために使用しているJSです：

        var count = 0;
        $(function(){
        $('a#add').click(function(){
                count += 1;
                $('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /><input class="unit" name="unit[]" type="text" /><input class="ingredient" name="ingredient[]" type="text" /></div>');
});
});

ただし、結果は次のようになります。

ここに画像の説明を入力してください

（スペースを削除してください。画像を投稿できません）

4

2 に答える 2

2

問題は、入力の元の行で、入力が改行またはスペース文字で区切られていることです。新しい行を追加すると、すべてのコードが一緒に追加され、1つの入力が前の入力に近くなります。

簡単な解決策、jsコードの各入力の後にスペースを追加します。

var count = 0;
    $(function(){
    $('a#add').click(function(){
            count += 1;
            $('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /> <input class="unit" name="unit[]" type="text" /> <input class="ingredient" name="ingredient[]" type="text" /></div>');
});`
于 2012-10-19T03:01:50.990 に答える
0

入力の間にスペースを追加しますか？

$('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /> <input class="unit" name="unit[]" type="text" /> <input class="ingredient" name="ingredient[]" type="text" /></div>');
于 2012-10-19T03:02:01.100 に答える