Question

我有一个表单，我将初始输入字段克隆为模板，以允许用户根据需要添加任意数量的选项。添加新字段的工作正常，但在尝试删除它们时，第一个字符按预期工作，但无法删除所有生成的字段。

我对JS的了解非常差，但我认为将其设置为删除父项应该是正确的操作。

<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 > fieldset'); // add to fieldset
    };

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

$(function()
{
    var removeInventory = function()
    {
        $(this).parent().remove();
    };

    $('.btnRemoveInventory').click(removeInventory); // attach event
});
</script>

HTML：

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

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

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

                            <input class="btnRemoveInventory" type="button" style="background: url(images/icn_trash.png) no-repeat; cursor:pointer; border: none;">
                        </div>

                    </fieldset><div class="clear"></div>

                    <!-- Add Inventory Button -->
                    <div style="width:62%; margin:0; padding:0; float: right; margin-right: 19%">
                        <input class="btnAddInventory" type="button" value="Add Item" style="float: right;">
                    </div><div class="clear"></div>

                </div>

Answer 1

通过click()（或任何其他快捷方式事件处理程序）附加事件仅适用于加载页面时可用的元素。相反，因为您要动态追加元素，所以需要使用委托事件处理程序。改变这个：

$('.btnRemoveInventory').click(removeInventory)

对此：

$('#inventoryItems').on('click', '.btnRemoveInventory', removeInventory)

这会将事件附加到最近的静态元素#inventoryItems，然后过滤引发的事件以查看目标是否与.btnRemoveInventory匹配。

使用Javascript删除动态添加的字段

1 个答案: