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;
    });
}

Jquery函数不能从webgrid中的新数据触发事件

更改事件绑定
 $("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事件之后必须是要查找事件的元素。