在我的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()被多次触发.