Javascript 延迟剑道网格初始化后的绑定单击事件
加载延迟脚本后,如何绑定单击事件? 我有一个剑道网格(在Razor中),由于性能问题而延迟了初始化。因此,所有js脚本都包含在文档的末尾Javascript 延迟剑道网格初始化后的绑定单击事件,javascript,jquery,razor,kendo-ui,kendo-asp.net-mvc,Javascript,Jquery,Razor,Kendo Ui,Kendo Asp.net Mvc,加载延迟脚本后,如何绑定单击事件? 我有一个剑道网格(在Razor中),由于性能问题而延迟了初始化。因此,所有js脚本都包含在文档的末尾 @(Html.Kendo().Grid<MyViewModel>() .Name("myGrid") .Columns(columns => { columns.Bound(c => c.Name); columns.Bound(c => c.City); c
@(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()
)
尝试使用事件委派
这样,在绑定事件时,目标DOM元素就不必存在。我会在答案中添加代码
event.stopPropagation()
,这样在传播到span元素时,id就不必是未定义的。
@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>
}
$(document).on('click', '[data-action="deactivate"]'function (event) {
var id = $(event.target).attr('data-id');
alert(id);
});