Javascript 无法在datatables的模式中注册按钮单击

我使用datatables，在一列中有一个用于删除的按钮。 单击此按钮需要显示一个模式，然后显示是/否以删除该行

我设法让模式工作，但我根本无法让javascript获取我的id。它不注册单击事件

这是我的代码（我省略了代码的明显部分，如表格）：

编辑：datatable配置代码如下所示： //机构“我的空缺”页面上的数据表

var table = $('#table_id').DataTable({
    "language": {
        "decimal":        "",
        "emptyTable":     "Geen data gevonden in tabel",
        "info":           "Toon _START_ tot _END_ van de _TOTAL_ activiteiten",
        "infoEmpty":      "Toon 0 tot 0 van de 0 activiteiten",
        "infoFiltered":   "(gefilterd van _MAX_ totale activiteiten)",
        "infoPostFix":    "",
        "thousands":      ",",
        "lengthMenu":     "Toon _MENU_ activiteiten",
        "loadingRecords": "Loading...",
        "processing":     "Processing...",
        "search":         "Zoeken:",
        "zeroRecords":    "Geen resultaten gevonden voor je zoekopdracht",
        "paginate": {
            "first":      "Eerste",
            "last":       "Laatste",
            "next":       "Volgende",
            "previous":   "Vorige"
        },
        "aria": {
            "sortAscending":  ": klik om de kolom oplopend te sorteren",
            "sortDescending": ": klik om de kolom aflopend te sorteren"
        }
    },
    "order": [[ 1, "desc" ]],
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copy',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'excel',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        }
    ],
    "pagingType": "full_numbers",
    drawCallback: function() {
        $('button.rowBtnDelete').on('click', function (e) {
            //e.preventDefault();
            alert("pls");

            // Get data like so
            //$(this).data('vacid');
        });
    }
});

---

因此，问题是您的delete模式没有获取需要删除的记录的id。我的建议是在模式中包含一个隐藏的ID字段，当单击行的delete按钮时，用ID更新隐藏的字段

<form class="modal-content" action="<?=site_url( $delAction, $link_protocol )?>" method="post" data-class="validation">
    <!-- Add below -->
    <input type="hidden" id="deleteModalVacId" name="vacid" value=""/>

---

您在哪里定义单击事件？是否在datatables行回调中？可能是在初始化该事件时，页面上不存在button元素。我的文章底部的javascript不应该拾取它吗？我的意思是它在整个页面的何处定义。我看到您的单击事件就在那里，但它是否位于页面底部脚本标记中的

$（document）.ready（）

块中？是的，它位于$（document）.ready（function（）{}）；它位于加载jQuery后调用的单独文件中。在同一个ready函数中还有很多其他的东西，我试着在var table=$（'#table_id'）.DataTable（{}）代码中添加你的代码，但是当我点击按钮时，它根本不会显示警报…你能用完整的DataTable初始化更新你的问题吗？哦，你在模态中谈论的是DELETE按钮，不是datatable按钮。您的模式是隐藏在页面上，还是通过ajax加载的？是的，我的意思是该按钮，但是，当单击模式按钮时，我是否应该能够绘制警报？如果我甚至不能显示警报，我想我不能解析我的数据属性值？所以我试着从那里开始，然后继续我自己；。。。模态隐藏在页面上。如果是这样，我不明白为什么它不起作用。也许可以加载页面，打开javascript控制台，看看是否可以使用

$（'button.rowBtnDelete'）.length来访问按钮，它应该返回1。
$(document).ready(function () {
    $('button.rowBtnDelete').on('click', function (e) {
        e.preventDefault();
        //var id = $(this).closest('tr').data('id');
        //$('#deletemodal').data('id', id).modal('show');
        alert("pls");
    });
});

var table = $('#table_id').DataTable({
    "language": {
        "decimal":        "",
        "emptyTable":     "Geen data gevonden in tabel",
        "info":           "Toon _START_ tot _END_ van de _TOTAL_ activiteiten",
        "infoEmpty":      "Toon 0 tot 0 van de 0 activiteiten",
        "infoFiltered":   "(gefilterd van _MAX_ totale activiteiten)",
        "infoPostFix":    "",
        "thousands":      ",",
        "lengthMenu":     "Toon _MENU_ activiteiten",
        "loadingRecords": "Loading...",
        "processing":     "Processing...",
        "search":         "Zoeken:",
        "zeroRecords":    "Geen resultaten gevonden voor je zoekopdracht",
        "paginate": {
            "first":      "Eerste",
            "last":       "Laatste",
            "next":       "Volgende",
            "previous":   "Vorige"
        },
        "aria": {
            "sortAscending":  ": klik om de kolom oplopend te sorteren",
            "sortDescending": ": klik om de kolom aflopend te sorteren"
        }
    },
    "order": [[ 1, "desc" ]],
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copy',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'excel',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        }
    ],
    "pagingType": "full_numbers",
    drawCallback: function() {
        $('button.rowBtnDelete').on('click', function (e) {
            //e.preventDefault();
            alert("pls");

            // Get data like so
            //$(this).data('vacid');
        });
    }
});

<form class="modal-content" action="<?=site_url( $delAction, $link_protocol )?>" method="post" data-class="validation">
    <!-- Add below -->
    <input type="hidden" id="deleteModalVacId" name="vacid" value=""/>

$(document).ready(function () {
    $('button.rowBtnDelete').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('vacid');
        $('#deleteModalVacId').val(id);
        $('#deletemodal').modal('show');
    });
});