点击函数内创建的resendBtn触发Uncaught TypeError: Illegal invocation错误

错误原因 #

点击resendBtn触发的错误，核心问题在于你在confirmAction的异步回调中依赖事件对象e获取邮件ID。当用户完成确认操作时，后续执行的tableBody.textContent = ''已经清空了原表格行，此时e.target对应的DOM元素已被移除，调用closest()等DOM方法时就会触发非法调用错误。

另外，你的循环使用了全局变量i（for (i = 0; i < data.length; i++)），所有事件处理函数会共享同一个i值，最终导致它们访问的都是数组最后一个元素的数据，这也是潜在隐患。

修复方案 #

1. 提前捕获邮件ID，避免依赖DOM元素
   在创建resendBtn时，直接从data[i]中取出当前邮件ID并存储在闭包中，无需在回调里通过事件对象查找DOM：

// 提前获取当前邮件ID，存入闭包
const currentMailId = data[i].id;
const resendBtn = document.createElement("button");
resendBtn.innerHTML = "<i class=\"far fa-paper-plane\"></i>";
resendBtn.setAttribute("class", "btn btn-icon");
addToolTipToElement(resendBtn, "Gensend email");
actionsEle.appendChild(resendBtn);
resendBtn.addEventListener("click", function(){
    confirmAction("Dette afsender emailen igen", function () {
        // 直接使用提前存储的ID
        updateMailSentStatusForPenneo(currentMailId);
        tableBody.textContent = '';
        addTableDataForMailQueue(applicationId, tableBody);
    })
})

2. 修复循环变量作用域问题
   将循环中的i改为块级变量，确保每个迭代的事件处理函数捕获独立的变量值：

// 使用let声明循环变量，避免全局污染
for (let i = 0; i < data.length; i++){
    // ... 后续代码保持不变
}

额外提示 #

你代码中其他事件处理函数（比如bodyButton、editBtn的点击事件）也存在类似的依赖DOM查找ID的情况，建议统一改为提前捕获对应ID的方式，避免后续出现同类错误。

内容的提问来源于stack exchange，提问作者andrelange91