0

当使用 Javascript 动态添加包含在单个字段集中的其他表单字段时，我遇到了关闭字段集标记仍然在第一个表单字段之后应用的问题。这导致布局中断，我需要弄清楚如何解决这个问题。

我试图将关闭字段集标记移到附加字段的 DIV 之外，但 Firebug 检查仍将其显示为在第一项之后关闭。

JAVASCRIPT

<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

0

您的 HTML 标记中有一个错误，一个额外的结束 DIV 标记，就在结束 FIELDSET 标记之前。把它移到.clear标签之后，你应该没问题。

当解析您的 HTML 并遇到结束 DIV 标记（对应于#inventoryItems）时，它会注意到您仍然有一个打开的 FIELDSET 标记，因此它会为其插入结束标记。之后，当遇到实际关闭的 FIELDSET 标记时，它会被简单地忽略，因为没有打开的 FIELDSET 标记。

原始错误在您的 JS 代码中。以下行添加到 DIV #inventoryItems 而不是 FIELDSET。

    .appendTo('#inventoryItems'); // add to container

尝试将其替换为：

    .appendTo('#inventoryItems > fieldset'); // add to fieldset
于 2013-09-02T10:48:25.280 回答