javascript - 如何删除使用jquery运行时创建的文本框

Question

我创建链接按钮，如果单击它，它将自动添加带有删除链接的文本框。问题是在添加文本框并添加删除链接后，单击删除链接时，无法删除文本框。怎么解决这个问题？

查看

@using (Html.BeginForm())
{
    <div id="editorRows">
        @foreach (var item in Model)
        {
            Html.RenderPartial("GiftEditorRow", item);
        }
    </div>
    @Html.ActionLink("Add another...", "BlankEditorRow", null, new { id = "addItem" })
    <input type="submit" value="Finished" />
}

@section Scripts {
    <script>
        $(document).ready(function () {
            $("#addItem").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) {
                        $("#editorRows").append(html);
                    }
                });
                return false;
            });

            $("a.deleteRow").on("click", function () {
                $(this).parents("div.editorRow:first").remove();
                return false;
            });
        });
    </script>
}

动态添加文本框的部分 View :

@model MvcApplication1.Models.Gift
@using MvcApplication1.Helpers

<div class="editorRow">
    @using (Html.BeginCollectionItem("gifts"))
    {
        <p>
            Item: @Html.TextBoxFor(x => x.Name)
            Value: @Html.TextBoxFor(x => x.Price, new { size = 4 })
            <a href="#" class="deleteRow">delete</a>
        </p>
    }
</div>

Answer 1

由于您要使用 jquery 动态生成 HTML，因此您必须使用事件委托(delegate)。

而不是

$("a.deleteRow").on("click", function () {
   $(this).parents("div.editorRow:first").remove();
   return false;
});

尝试

$(document).on("click", "a.deleteRow" ,function () {
   $(this).parents("div.editorRow:first").remove();
   return false;
});

了解更多 Here.