как исправить событие клика. это не работает, даже отладка не указывает на это

Question

Я создаю datatable для insert, update.событие редактирования будет запускаться при нажатии кнопки, но оно не запускает никаких событий при нажатии, даже отладка не указывает на него при нажатии.

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

Это мой 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

Я подозреваю, что ваш обработчик кликов не работает, так как ваши строки не существуют к тому времени, когда вы пытаетесь прослушивать клики.Попробуйте изменить это следующим образом:

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

Если это решит вашу проблему, вы можете проверить официальный учебник на эту тему.

Еще одна вещь в вашем кодеменя беспокоит использование метода 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 * 1034.* Методы API к catcисправьте ошибки или добавьте в свое приложение новые функции.