当只使用.on()时， eventHandler触发多次

Question

function changeStatus() { 
$('#dataTable tbody').on('change', '.orderStatus', function () {..code} 
}
function showOrdersInModal() { 
$('#dataTable tbody').on('click', '.fa-eye-btn', function (e) {...code} 
}

function addUrl() { 
$('#dataTable tbody').on('click', '.addUrl', function () {..code} 
}

function showOrders() {
$.ajax({
type: 'method',
url: 'url',
data: { data },
success: function (response) {
$('#dataTable').DataTable().clear().destroy();
let data = JSON.parse('[' + response.replace(/}{/g, '},{') + ']');

$('#dataTable').DataTable( {
autoWidth: false,
pageLength: 25,
lengthMenu: [[25, 50, 100, 500, -1], [25, 50, 100, 500, 'All']],
data: data,
columns: [
{ data: 'receipt' },
{ data: 'first_last_name' },
{ data: 'contact_no' },
{ data: 'address' },
{ data: 'email' },
{ data: 'url' },
{ data: 'status' },
],
});
showOrdersInModal();
changeStatus();
addUrl();
},
});
}
showOrders();

当我在。on()之前使用。off()时，唯一的最后一个函数将执行，这是addUrl();，但当我删除。off()时，它将触发事件取决于我点击每个按钮或元素的次数。

是否有一种方法，我可以使eventHandler触发一次，即使我点击任何按钮多次?

或者是否有一种方法可以执行所有三个函数，而不仅仅是最后的addUrl();函数?

Answer 1

我找到了答案，当使用数据表时，我无法在下一页后访问DOM，所以我使用drawCallback，如下所示:

$('#dataTable').dataTable({
drawCallback: function () {
showOrdersInModal();
changeStatus();
addUrl();
},
retrieve: true,
deferRender: true,
data: data,
columns: [
{ data: 'data' },
],
});

那么我就用这个

$('.className').off().on('click', function () {..code}