0

Javascript を使用して、単一のフィールドセットに含まれる追加のフォーム フィールドを動的に追加すると、フィールドセットの終了タグがまだ最初のフォーム フィールドの後に適用されるという問題が発生します。これが原因でレイアウトが壊れているので、どうすればそれを回避できるかを理解する必要があります。

追加のフィールドが追加されている DIV の外にフィールドセットの終了タグを移動しようとしましたが、Firebug インスペクションでは、最初の項目の後に閉じていると表示されます。

ジャバスクリプト

<script type="text/javascript"> 
$(function()
{
    var template = $('#inventoryItems .inventory:first').clone(),
        inventoryCount = 1;

    var addInventory = function()
    {
        inventoryCount++;
        var inventory = template.clone().find(':input').each(function()
        {
            var newId = this.id.substring(0, this.id.length-1) + inventoryCount;
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .attendee
        .attr('id', 'inv' + inventoryCount) // update attendee id
        .appendTo('#inventoryItems'); // add to container
    };

    $('.btnAddInventory').click(addInventory); // attach event
});
</script>

HTML

                    <div id="inventoryItems" class="inventoryItems" style="margin:0; padding:0;">

                        <fieldset style="width:62%; float:left; margin-left: 19%;">

                            <div id="inv1" class="inventory">
                                <label>Inventory</label>
                                <select name="invItem" style="width:92%;">
                                    <?php
                                        $invItem_values = array("id", "name");
                                        display_options_list($dp_conn, $invItem_values, "inventory", "id");
                                    ?>
                                </select>

                                <a class="btnAddInventory"><img src="images/icn_new_article.png"></a>
                                <a href="#"><img src="images/icn_trash.png"></a>
                            </div>
                    </div>
                        </fieldset><div class="clear"></div>
4

1 に答える 1