Jquery函数不能从webgrid中的新数据触发事件
本文关键字:数据 事件 新数据 不能 函数 webgrid Jquery | 更新日期: 2023-09-27 18:14:04
我不太确定如何命名这个问题,但本质上我的问题是,是调用一个jquery函数基于一个新的元素,被放入我的WebGrid。然而,我的webgrid是通过切换单选按钮来填充的。然后通过ajax调用使用新数据更新网格。因此,没有页面刷新完成,我的元素存在于我的网格中,但是我的javascript不知道它们。
下面是我的一些代码。
Webgrid:
@grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("account_number", "Account Number", canSort: true),
grid.Column("last_name", "Last Name", canSort: true),
grid.Column("first_name", "First Name", canSort: true),
grid.Column("middle_name", "Middle Name", canSort: true),
grid.Column("reject_reviewed", "Reviewed", canSort: true, format: (item) => Html.CheckBox("completed", (bool)(item.reject_reviewed == 1), new { disabled = "disabled" })),
grid.Column("comment", "Comments", format: (item) =>
new HtmlString(
Html.ActionLink("Add", "RejectAddComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message },
htmlAttributes: new { data_modal = "", id = "btnCreate", @class = "" }).ToString()
+ " | " +
Html.ActionLink("View", "RejectViewComment", controller, new RejectCommentViewModel { reject_id = item.id, account_number = item.account_number, reject_message = item.reject_message },
htmlAttributes: new { data_modal = "", id = "btnCreate", @class = "" }).ToString())),
grid.Column("reject_message", "Reject Message", canSort: true)))
javascript: $(function () {
$.ajaxSetup({ cache: false });
$("body").on("click", 'a[data-modal]', function (e) {
// hide dropdown if any
$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
从
更改事件绑定 $("a[data-modal]").on("click", function (e) {
$("body").on("click", 'a[data-modal]',function (e) {
最好使用一个比body更好的选择器,比如你的gridid或class
顺便说一下,这是一个很有名的问题,谷歌一下将行改为this
$("#scroll-grid").on("click", "#btnCreate", function (e)
和javascript事件现在触发。
第一个元素必须是父元素,click事件之后必须是要查找事件的元素。