Функция Javascript не запускается из строки Jquery Datatables

Question

У меня есть таблица, в которой используются таблицы данных, и я хочу вызвать функцию, когда я выбираю ссылку в строке, например:

<script>
        var selected = Array();
        var form_data = {
            "Id": "@Model.ApplicationDetails.Id"
        };
        $(document).ready(function () {
            var table = $("#table").DataTable({
                "ajax": {
                    "url": "@Url.Action("GetApplicationRoles", @ViewContext.RouteData.Values["controller"].ToString())",
                    "type": "POST",
                    "data": form_data,
                    "datatype": "json"
                },
                "filter":false,
                "language": {
                    "search": "",
                    "searchPlaceholder": " Search"
                },
                "ordering": true,
                "lengthChange": false,
                "columns": [
                    {
                        "data": function (data, type, row, meta) {
                             var url = "@Url.Action("EditRole", @ViewContext.RouteData.Values["controller"].ToString())/" + data.Id;
                            return "<a href='#' class='select-item' data-id='"+data.Id+"'>" + data.RoleName + "</i></a>"
                        }, "name": "RoleName"
                    }
                ],
                "responsive": true,
                "processing":true,
                "serverSide": true,
            }).columns.adjust()
            .responsive.recalc();
            new $.fn.dataTable.FixedHeader(table);
        });

        $("#table tbody").on('click',".select-item",function (e) {
            e.preventDefault();
            alert("test");
            return false;
            //e.preventDefault();
            //console.log($(this).data("id"));
        });
    </script>

Как вы можете видеть, когда пользователь нажимает на эту строку:

<a href='#' class='select-item' data-id='"+data.Id+"'>" + data.RoleName + "</i></a>

Должна сработать функция внизу.Тем не менее, сейчас происходит только то, что мой URL добавляется с помощью хеша #.Я думаю, что что-то пропустил, но я не могу это поймать.

Answer 1

Вы используете делегированный обработчик событий, который является правильным. Однако одна проблема заключается в том, что основным селектором должен быть элемент, который присутствует в DOM при загрузке страницы. Элемент tbody также генерируется динамически, поэтому обработчик событий подключен неправильно.

Чтобы исправить это, прикрепите событие к #table напрямую:

$('#table').on('click', '.select-item', function(e) {
  e.preventDefault();
  alert("test");
});

Вам также нужно переместить этот кодовый блок в обработчик событий document.ready.