在我的Java项目中,使用JSP,我在弹出窗口中添加了一个DataTable,如下所示:

<table id="table" class="display"  style="width:100%">
        <thead>
           <tr>
               <th class="select-checkbox sorting_disabled" rowspan="1" colspan="1" style="width: 7.41667px;" aria-label=""></th>
               <th class="thHidden">Id</th>
               <th class="thHidden">Id order</th>
               <th>Data</th>
               <th>Number</th>
               <th class="thHidden">Id customer</th>
               <th>Company</th>
            </tr>
       </thead>
    </table>

和以下js脚本:

if (!$.fn.DataTable.isDataTable('#table')) {
                    table = $('#table').DataTable({

                        ajax: {
                            "url": url,
                            method: "post",
                            data: function(d){d.param= $("#param").val()},
                            headers: headers,
                            dataSrc: ""
                        },
                        columns: [
                            {"data": "", "defaultContent": ""},
                            {"data": "id", "defaultContent": ""},
                            {"data": "idOrder", "defaultContent": ""},
                            {"data": "data", "defaultContent": ""},
                            {"data": "number", "defaultContent": ""},
                            {"data": "idCustomer", "defaultContent": ""},
                            {"data": "company", "defaultContent": ""}                                
                        ],

                        columnDefs: [
                            {
                                data: null,
                                defaultContent: '',
                                orderable: false,
                                className: 'select-checkbox',
                                targets: 0
                            },
                            {
                                targets: 'thHidden',
                                visible: false
                            },
                            {
                                targets: 3,
                                render: $.fn.dataTable.render.moment('MMM D, YYYY H:mm:ss A', 'DD/MM/YYYY')
                            }],

                        language: {
                            "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/it_it.json"
                        },
                        select: {
                            selector: 'td:first-child',
                            info: false
                        },
                        order: [[3, 'asc']]
                    });
                }
                else {
                    table.rows().deselect();
                    table.ajax.reload();
                }

                table.on('select', function (e, dt, type, indexes) {
                    if (type === 'row') {                         
                        alert("row selected");                              
                    }
                });
    
                table.on('deselect', function (e, dt, type, indexes) {
                    if (type === 'row') {
                        alert("row deselected");
                    }
                });

通过这种方式,我可以 Select 和取消 Select 行.对于第一个打开的弹出窗口,一切正常,但当我关闭一个弹出窗口并重新打开一个全新的弹出窗口(表中的新数据重新加载)时,对于选中/取消选中的每一行,都会多次调用 Select 和取消 Select 事件.

我想了解为什么.on()被多次触发.

推荐答案

正如 comments 中提到的,

在重新加载表之前,您可以使用off方法删除 Select /取消 Select 事件监听器.

参考文献:https://datatables.net/reference/api/off()

Javascript相关问答推荐

我不明白这个react 组件有什么问题

reaction useEffect KeyDown for each 条目配音输出

禁用从vue.js 2中的循环创建的表的最后td的按钮

如何在JavaScript中在文本内容中添加新行

如何使用Echart 5.5.0创建箱形图

为什么我的列表直到下一次提交才更新值/onChange

当作为表达式调用时,如何解析方法decorator 的签名?

Prisma具有至少一个值的多对多关系

单个HTML中的多个HTML文件

用于在路径之间移动图像的查询

更新动态数据中对象或数组中的所有值字符串

使用Nuxt Apollo在Piniastore 中获取产品细节

Puppeteer上每页的useProxy返回的不是函数/构造函数

警告框不显示包含HTML输入字段的总和

未捕获语法错误:Hello World中的令牌无效或意外

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

react 路由如何使用从加载器返回的数据

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

通过解构/功能组件接收props-prop验证中缺少错误"

为什么我的SoupRequest";被重置为初始值,以及如何修复它?