javascript - 当我更改内部 HTML 时，按钮停止工作

Question

我有这个动态创建的按钮可以正常工作，innerHTML 看起来像这样：

inboxEmail.innerHTML = `
<strong>${email.sender}</strong><br>
  ${email.subject}<br>
  ${email.body}        
`;

这个功能正如我所期望的那样。我想更改文本在按钮内的显示方式，我通过将 innerHTML 更改为此成功地做到了这一点：

        inboxEmail.innerHTML = `
        <div class="container">
          <div class="row">
            <div class="col-10">
            <strong>${email.sender}</strong><br>
            ${email.subject}<br>   
            ${email.body}   
            </div>
            <div class="col-2">
              ${email.timestamp} 
            </div>
          </div>
        </div>
        `;

现在这个按钮根本不起作用。这是 onclick 函数：

  document.querySelector('#emails-view').addEventListener('click', function(e) {
    if(e.target && e.target.nodeName == 'BUTTON' && isNaN(e.target.id) === false) {
        alert(e.target.id);
        emailSelect(e.target.id);
      } else {
        console.log('error')
        return false;
      }
  })

相反，“错误”显示在控制台上。我还没有碰过inboxEmail.id 只是innerHTML 那为什么它不起作用呢？

编辑：这是我从页面上的检查元素复制的“电子邮件视图”：

<div id="emails-view" style="display: block;"><h3>Inbox</h3>
<div class="list-group">
  <button class="list-group-item list-group-item-secondary list-group-item-action" id="7">
        <div class="row">
        <div class="col-10">
        <strong>[e-mail]</strong><br>
        RE: very important<br>   
        Hi 

I hope y...   
        </div>
        <div class="col-2">
        Oct 16 2020, 08:13 PM 
        </div>
        </div>
        
        </button></div></div>

标签： javascriptonclicklistenerinnerhtml