Kendo 网格延迟初始化后绑定点击事件

Question

延迟脚本加载后如何绑定点击事件？

我有一个 Kendo 网格（在 Razor 中）由于性能问题延迟了初始化。所以所有的js脚本都包含在文档的末尾。

@(Html.Kendo().Grid<MyViewModel>()
    .Name("myGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name);
        columns.Bound(c => c.City);
        columns
            .Bound(c => c.Id)
            .Title("Commands")
            .Sortable(false)
            .Filterable(false)
            .ClientTemplate(
                "<a href='" + @Url.Action("Details", new { id = "#=Id#" }) + 
                    "' class='btn btn-success' title='Details'>" +
                    "<span class='glyphicon glyphicon-list'></span></a>" +
                "<a href='" + @Url.Action("Edit", new { id = "#=Id#" }) +
                    "' class='btn btn-info' title='Edit'>" +
                    "<span class='glyphicon glyphicon-pencil'></span></a>" +
                "<a href='\#' data-id='#=Id#' data-action='deactivate' " +
                    "class='btn btn-warning' title='Desactivate'>" +
                    "<span class='glyphicon glyphicon-remove-sign'></span></a>"
            );
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(ds => ds
        .Ajax()
        .Read(read => read.Action("ReadData", "MyController")).Sort(a => a.Add("Name")))
    .Deferred()
)

然后我在末尾有一个部分，我想将点击事件绑定到具有 data-action='deactivate' 属性的每个元素的 <a> 点击。问题是延迟初始化是在我的文档准备好后执行的。

@section scripts {
    @Scripts.Render("~/bundles/kendo")

    @Html.Kendo().DeferredScripts()

    <script>
        $(document).ready(function () {
            $('[data-action="deactivate"]').click(function (event) {
                var id = $(event.target).attr('data-id');
                alert(id);
            });
        });
    </script>
}

Answer 1

尝试使用事件委托

http://learn.jquery.com/events/event-delegation/

$(document).on('click', '[data-action="deactivate"]'function (event) {
    var id = $(event.target).attr('data-id');
    alert(id);
});

这样，绑定事件时，目标DOM元素不必存在。

Kendo 网格延迟初始化后绑定点击事件

Bind click event after deferred initialization of Kendo Grid

javascript

jquery

razor

kendo-ui

kendo-asp.net-mvc