动态生成的Modal内按钮点击时onclick事件未触发绑定函数问题

你代码的问题出在循环末尾的subtaskList.innerHTML += '<br>'这一行。
innerHTML +=操作会先将容器内现有所有DOM元素序列化为HTML字符串，拼接新内容后，清空容器再把拼接后的字符串重新解析为DOM元素渲染。你之前给按钮绑定的onclick事件是挂载在原本的按钮DOM对象上的，重新解析生成的新按钮没有继承原来的事件绑定，自然点击没有响应。
你之前在控制台打印的是已经被销毁的旧按钮对象，所以能看到绑定了事件，但页面上实际渲染的是无事件绑定的新按钮，这就是你排查时看到的矛盾现象的原因。

• 方案1：替换innerHTML拼接换行的写法，改用DOM操作添加换行符
  将循环最后一行subtaskList.innerHTML += '<br>'替换为如下代码即可：

const br = document.createElement('br');
subtaskList.appendChild(br);

全程使用appendChild添加元素不会触发容器内现有DOM的重解析，已绑定的事件不会丢失。

• 方案2：使用事件委托绑定事件，适配后续动态新增按钮的场景
  不在单个按钮上绑定事件，统一给父容器绑定一次点击事件，通过事件冒泡判断点击目标：

// 事件绑定只需执行一次，不要放在循环内
subtaskList.addEventListener('click', (e) => {
  // 判断点击的是不是子任务按钮
  if (e.target.classList.contains('taskModalSubtaskButton')) {
    // 建议创建按钮时给按钮添加data-index属性存储子任务索引：subtaskButton.dataset.index = subtaskIndex
    const curSubtask = task.subtasks[e.target.dataset.index];
    openSubTaskModal(curSubtask, task);
  }
})

该方案后续新增子任务按钮时不需要重复绑定事件，维护成本更低。

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