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事件處理程序內移動該代碼塊。