Javascript 使用函数动态添加表行

我有一个需要动态添加/删除行的表。每行在最后一列中都有一个超链接以删除记录。由于可以在页面加载后动态添加行，因此有时数据库中找不到该记录

当用户单击Delete链接时，将调用ajax函数从数据库中删除记录。只要函数服务器端函数没有崩溃，操作就会成功返回

调用ajax函数的success函数后，我想从表中删除tr

加载页面后，我可以对表中存在的每一行执行此操作。ajax函数将正确的信息发送回服务器，tr将从表中删除。但是，对于我在delete ajax函数之后添加的每个tr，tr将保留在页面上

看法

遵循post并使用.live命令

    $('#agentTable').live('click', 'tr a', function (e) {
        $.ajax({
            url: '@Url.Action("DeleteRow", "BankList")',
            data: { id: $(this).attr('id') },
            dataType: 'html',
            cache: false,
            context: this,
            success: function () {
                $(this).parents('tr').remove();
            }
        });
    });

---

似乎有些东西没有正确绑定，只是想知道，为什么要将函数放在jquery对象调用中$作用{…您是否只是尝试在document ready函数中设置侦听器？在您所说的情况下，我通常会在要删除的元素中放置一个onclick事件。因此，您的删除链接类似于@Patrick-是的，我首先尝试了doc.ready函数，但得到了相同的结果。@nmarsh-这只会将超链接发送到deleteRow函数。有什么方法可以发送整个tr，或者在deleteRow函数中，知道我需要删除哪一行吗？我仍然无法100%理解为什么是您的。在jquery对象内部的事件中，是否有这样的原因？Live实际上已弃用，您应该使用。在上，在jquery对象外部正确编写代码

@model CollectionItemTest.Models.BankListAgentId
@{
    Layout = null;
}
@using (Html.BeginCollectionItem("BankListAgentIds"))
{
    @Html.HiddenFor(model => model.TableId)
    @Html.HiddenFor(model => model.BankID)
    <tr>
        <td>
            @Html.EditorFor(model => model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.CompanyCode)
        </td>
        <td>
            @Html.EditorFor(model => model.NonResBizNY)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
        </td> 
        <td>
            @Html.ActionLink("Delete", "", "",  new { href = "javascript:void(0)", id = Model.TableId  })
        </td>                              
    </tr>    
}

<script type="text/javascript">
    $(function() {
        $('#agentTable').on('click', 'tr a', function(e) {
            $.ajax({
                url: '@Url.Action("DeleteRow", "BankList")',
                data: { id: $(this).attr('id') },
                dataType: 'html',
                cache: false,
                context: this,
                success: function () {
                    $(this).parents('tr').remove();
                }
            });
        })
    });
    $(document).ready(function () {
        $('.addCode').click(function() {
            $.ajax({
                url: '@Url.Action("BlankRow", "BankList")',
                dataType: 'html',
                cache: false,
                success: function(html) {
                    $("#agentTable > tbody").append(html);
                }
            });
        });
    });
</script>

    public JsonResult DeleteRow(int id)
    {
        if (id == 0) return null;

        var agent = (from a in db.BankListAgentIds
                     where a.TableId == id
                     select a).FirstOrDefault();

        if (agent == null) return Json("Agent Id not found", JsonRequestBehavior.AllowGet);

        db.BankListAgentIds.Remove(agent);

        return null;
    }

    public ViewResult BlankRow()
    {
        return View("AgentIdPartial", new BankListAgentId());
    }

    $('#agentTable').live('click', 'tr a', function (e) {
        $.ajax({
            url: '@Url.Action("DeleteRow", "BankList")',
            data: { id: $(this).attr('id') },
            dataType: 'html',
            cache: false,
            context: this,
            success: function () {
                $(this).parents('tr').remove();
            }
        });
    });