javascript - 如何修复点击事件。即使调试没有指向它，它也不起作用

Question

我正在为插入、更新创建一个数据表。编辑事件将在单击时触发，但不会在单击时触发任何事件，即使调试在单击时未指向它。

function GetLoginData() {
    $.ajax({
        url: '/LoginMaster/GetLoginData',
        type: 'get',
        dataType: 'json',
        success: function (result) {
            var GetLoginData = result;
            //$('#tblLoginMaster').DataTable.clear();
            //$('#tblLoginMaster').DataTable.destroy();
            //                table.empty();
            if (GetLoginData != '') {
                var str = "";

                $.each(GetLoginData, function (index, obj) {
                    var GetID = obj.Id == null ? "" : obj.Id;
                    var GetName = obj.Name == null ? "" : obj.Name;
                    var GetEmailID = obj.Email == null ? "" : obj.Email;
                    var GetPassword = obj.Password == null ? "" : obj.Password;
                    var GetRole = obj.Role == null ? "" : obj.Role;

这是我的 editstyle 类所在的位置

                    str += "<tr class='EditStyle' data-target='#addUserModal' data-toggle='modal' value='" + GetID +"'>";
                    str += "<td>" + GetID + "</td>";
                    str += "<td>" + GetName + "</td>";
                    str += "<td>" + GetEmailID + "</td>";
                    str += "<td>" + GetPassword + "</td>";
                    str += "<td>" + GetRole + "</td>";
                    str += "</tr>"
                    $('#tblbodyLoginMaster').html(str);
                });
                $('#tblLoginMaster').DataTable({
                    "paging": true,
                    "lengthChange": false,
                    "searching": false,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "sDom": 'lfrtip'
                });
            }
        }
    });
}

这是我的点击事件

$('tr.EditStyle').on('click', function () {
    if ((this).val() != 0) {
        var rowData = (this).children('td').val();

        $('#id').val(rowData[0]);
        $('#username').val(rowData[1]);
        $('#emailId').val(rowData[2]);
        $('#password').val(rowData[3]);
        $('#role').val(rowData[4]);
    }
});

Answer 1

我怀疑您的点击处理程序不起作用，因为当您尝试监听点击时，您的行不存在。尝试改变它，如下所示:

$('#tblLoginMaster').on('click', 'tr.EditStyle', function () {
    ...
});

如果这解决了您的问题，您可以查看oficial tutorial关于该主题。

您的代码中引起我关注的另一件事是使用 jQuery $.ajax() 方法来填充您的表以及您填充该表的方法:

• 为了动态获取数据，您应该使用 DataTables ajax选项并利用 ajax.dataSrc :

$('#tblLoginMaster').DataTable({
    ...,
    ajax: {
        url: '/LoginMaster/GetLoginData',
        method: 'GET',
        dataSrc: //here goes json property or the method that retrieves table data out of json response
    }
});

• 您不需要自己编写表格主体 HTML，您只需指向 columns 中相应的源数据属性即可。/columnDefs选项，并使用 createdRow 选项来分配必要的行属性:

$('#tblLoginMaster').DataTable({
    ...,
    rowCreated: (tr, _, rowIdx) => $(tr).attr({
        'class':'EditStyle', 
        'data-target': '#addUserModal', 
        'data-toggle': 'modal', 
        'value': rowIdx
    }),
    columns: [
        {data: 'Id', header: 'Id'},
        {data: 'Name', header: 'Name'},
        {data: 'Password', header: 'Password'},
        ...
    ]
});

您可能不愿意对您的应用程序进行这样的全局更改，但否则您可能会遇到与 AJAX 异步性质相关的各种问题，并剥夺自己使用过多 DataTables 的可能性 API methods捕获错误或用新功能丰富您的应用程序。