Question

我正在尝试构建一个动态视图，用户可以随意添加和删除行。

到目前为止，我已成功添加新行，但删除行只删除了第一行，现在添加了新行。

以下是主视图的呈现方式：

@using MyApp.Models
@using MyApp.Utilities
@model PackUtility

@{
    ViewBag.Title = "Item to Sell:" + Model.mTitle;
}

<script language="javascript">
    $(document).ready(function () {
        $('#addItemUtilityZone').click(function () {
            $.ajax({
                url: '@Url.Action("AddItemUtilityRow")',
                cache: false,
                success: function (html) {
                    $('#addItemUtilityZone').append(html);
                }
            });
        });
        $('a.deleteRow').click(function () {
            alert("clicked");
            $(this).parents("div.editorRow:first").remove();
            return false;
        });
    });
</script>

@using (Html.BeginForm("SelectItemToSell", "Item", FormMethod.Post, new { onsubmit = "ShowProgress()"}))
{
    @Html.ValidationSummary(true)

    <div class="formStyle baseFontSize">
        (...)
        <div>
                <div>
                    >> Possible Quantity: @Html.DisplayFor(_item => _item.mPossibleQuantity) <<
                </div>
                <div class="formStyle" id="addItemUtilityZone">
                    <label class="center bold bigFontSize">Options</label>
                    @foreach (ItemListingUtility utilityRow in Model.ListItemUtility)
                    {
                        Html.RenderPartial("ItemUtilityRow", utilityRow);
                    }

                </div>
                <div>
                    <a href="javascript:void(0);" id="addPackAuctionUtility">Add row</a>
                </div>
        </div>
    </div>
}

所以这个部分视图在foreach中呈现，并且由jquery中的ajax方法调用：

@using HtmlHelpers.BeginCollectionItem
@model MyApp.Utilities.ItemListingUtility

@using (Html.BeginCollectionItem("_listItems"))
{
    <div class="editorRow defaultBaseStyle blueBorder">
        <div class="float-left defaultBaseStyle">
            <div class="float-left">Quantity:</div>
            <div class="float-right">@Html.DisplayFor(_item => _item.Quantity)
                @Html.HiddenFor(_item => _item.Quantity)
            </div>
        </div>
        <div class="float-left defaultBaseStyle">
            <div class="float-left">Price:</div>
            <div class="float-right">@Html.TextBoxFor(_item => _item.StartPrice, new { @class = "positive moneyValue"}) $</div>
        </div>
        <div class="clear"></div>
        <a href="javascript:void(0);" class="deleteRow">Delete</a>
    </div>
}

正如我所提到的，当用户点击＆＃34;删除＆＃34;链接，只有原来的第一部分受到影响，其余的从不调用jquery方法，我不明白为什么或如何纠正这个。

Answer 1

试试这样，你需要event delegation！

$('#addItemUtilityZone').on('click','a.deleteRow',function () {
   alert("clicked");
   //$(this).parents("div.editorRow").remove(); // remove parents
   //$(this).parents("div.editorRow:first").remove(); // To remove first always
    $(this).closest("div.editorRow").remove(); // Use closest()
   return false;
});

要删除行，最好使用closest()而不是parents()。

事件委托允许我们将单个事件监听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

$(document.body).on('click','a.deleteRow',function () {

});

如果动态生成的元素，您可以将最接近的父元素作为选择器，我有#addItemUtilityZone因为新元素/行被附加到此div，您也可以尝试document.body

Answer 2

使用

        $(this).parents("div.editorRow").remove();

它应该工作。但是如果你想过滤，请使用

        $(this).parents("div.editorRow:first-child").remove();

动态删除视图中的行：仅第一行受到影响

2 个答案: