如何解决点击事件。 即使调试没有指向它，它也不起作用

Question

i'm creating a datatable for insert, update . edit event will fire on the click of but it is not firing any event on click, even the debug is not pointing toward it on click.

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;

This is where my editstyle class is

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

This is my click event

$('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

I'm suspecting your click handler doesn't work as your rows do not exist by the time you attempt to listen for clicks. Try to change that, like this:

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

If that solves your problem, you may check out oficial tutorial on that topic.

Another thing in your code that raises my concern is using jQuery $.ajax() method to populate your table and the very method you populate that:

• in order to fetch your data dynamically, you should use DataTables ajax option and take the advantage of 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
    }
});

• you don't need to cook up table body HTML on your own, you may simply point to corresponding source data properties within columns / columnDefs options, and make use of createdRow option to assign necessary row attributes:

$('#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'},
        ...
    ]
});

You may be reluctant to do such a global change to your app, but otherwise you may run into different sorts of issues related to AJAX-async nature and deprive yourself of the possibility to use the plethora of DataTables API methods to catch the bugs or enrich your app with new features.