Kendo UI Grid：方法“removeRow”删除网格的所有事件

Question

我有一个Kendo UI Grid，并通过jQuery（例如点击）将鼠标事件添加到网格中。这没有任何问题。但是通过删除网格中的一行，网格的所有事件也会被删除。我做错了什么？

这是我删除行的代码：

var rowToDelete = $(this).closest("tr");
var grid = $("#gridId").data("kendoGrid");
grid.removeRow(rowToDelete);

我在网格的每一行添加了一个按钮，向这些按钮添加了一个单击事件，删除了相应的行。删除行后，将删除所有其他按钮的单击事件。与网格列的鼠标悬停事件相同。

感谢您的帮助！

Answer 1

请尝试使用以下代码段。

查看

<script>
function gridDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    grid.tbody.find(">tr").click(function () {
        $("#divTest").html('Row Index Clicked :' + $(this).index());
    });
}

function DeleteRow(obj) {
    var rowToDelete = $(obj).parent().parent()
    var grid = $("#Grid").data("kendoGrid");
    grid.removeRow(rowToDelete);
}
</script>
@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.ID);
    columns.Bound(p => p.Name);
    columns.Template(@<text></text>).ClientTemplate("<input type='button' class='k-button' value='Delete' onclick='DeleteRow(this);' />");

})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
        .Read(read => read.Action("Grid_Read", "Home"))
)
.Events(e => e.DataBound("gridDataBound"))
)
<div id="divTest"></div>

<强> CONTROLLER

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 0; i < 5; i++)
        {
            TestModels t1 = new TestModels();
            t1.ID = i;
            t1.Name = "Name" + i;
            models.Add(t1);
        }

        return Json(models.ToDataSourceResult(request));
}

<强> MODEL

public class TestModels
{
    [Display(Name = "ID")]
    public int ID { get; set; }

    [Display(Name = "Name")]
    public string Name { get; set; }

}

如果有任何疑虑，请告诉我。

Answer 2

您没有发布所有代码，所以我不得不猜测......

发生的事情是您在初始化之后设置了与元素关联的事件处理程序，因此对于某些特定HTML元素但，在某些情况下会重新生成Kendo UI网格（基本上是系统删除表并生成一个新的表。）

如果要为当前表内容设置事件处理程序，而不是为将来设置事件处理程序，可以使用jQuery on事件但使用三个参数，其中第二个是选择器（在jQuery的先前版本中是使用live函数实现的，但现在已弃用，所以如果你的jQuery版本支持它，最好使用on）。

你要做的是：

$("#grid").on("click", ".my-selector", function(e) {
    var rowToDelete = $(this).closest("tr");
    var grid = $("#gridId").data("kendoGrid");
    grid.removeRow(rowToDelete);
});

其中my-selector是您可能已设置用于标识class按钮的CSS remove属性。