Question

当使用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>

Answer 1

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

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

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

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

尝试将其替换为：

    .appendTo('#inventoryItems > fieldset'); // add to fieldset

使用Javascript附加表单字段

1 个答案: