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事件处理程序内移动该代码块。