JS onlick方法在没有setTimeout的情况下不起作用

Question

我目前有一个动态添加的列表，然后打算将该元素设置为onclick：

function setUi(doc)
{
  document.querySelectorAll('.class').forEach(element =>
  {
    element.innerHTML += `<button data-id="${doc.id}" data-function="update">Click me</button>`;
  });

  document.querySelectorAll("[data-id='" + doc.id + "']").forEach(element =>
  {
    let func = element.dataset.function;
    let doFunc;
    switch (func)
    {
      case 'update':
        doFunc = function()
        {
          update(doc);
        };
        break;
      case 'delete':
        doFunc = function()
        {
          deleteObj(doc);
        };
        break;
    }
    element.onclick = doFunc;
  });
}

HTML呈现良好：

<button data-id="123" data-function="update">Click me</button>

但是，此代码对我不起作用。我得到element.onclick未定义。因此，我在查询选择器外添加了setTimeout来设置onclick，当将onclick设置为非零整数（例如50，但0无效）时，它可以正常工作。

但是，这显然不是特别有效，所以我想知道是否有比仅实现setTimeout更好的选择，因为不知道setTimeout会在什么时候触发，或者HTML何时会触发完成渲染，是吗？

提前感谢。

Answer 1

对我来说，您似乎是在一些父级内部创建一堆元素，然后事后在页面上遍历所有新子级并向其添加侦听器。创建孩子时，为什么不只添加侦听器？