javascript - 为什么我的“addEventListen”按钮只能工作一次？

Question

我有三个函数，它们都包含contents.innerHTML = 'some HTML';.

innerHTML这些函数是在调用时用内容的 id重写div 的。

我在导航栏上也有三个按钮，它们在每个功能的顶部指定innerHTML。当调用函数时，IE 按钮本身也与 HTML 的其余部分一起被重写。

这些按钮每个都有自己独立的 id，因此它们document.getElementById('button-id');在 JS 文件中都有一个。

然后我使用以下事件来调用每个函数：

buttonName.addEventListener('click', () => {
  functionCall();
});

我的问题是我的按钮只能工作一次。在我单击它们中的任何一个后，它们不再起作用。我觉得原因在盯着我看，但我就是看不到。

HTML：

<main>
    <div id="content"></div>
</main>

JS：

const displayUser = () => {
  content.innerHTML = `
  <div class="nav-panel">
    <a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="${img.arrows[2]}" alt="Logout Arrow">
    <h2 id="logout-btn">Back</h2></a>
    <a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="${img.user[0]}" alt="User Picture">
    <h2>Username</h2></a>
    <a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
    <img class="nav-pic-r nav-img settings-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
    <a class="settings-btn hide-desktop"><img class="nav-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
  </div>

  --- MORE NON NAV RELATED HTML ---
  `;
};

就导航 HTML 而言，所有三个函数看起来都与 this 完全相同。

displayLists(); // load page with displayLists

const logoutBtn = document.getElementById('logout-btn'); // nav links
const userBtn = document.getElementById('user-btn');
const settingsBtn = document.getElementById('settings-btn');

logoutBtn.addEventListener('click', () => {
  displayLists()
}); // change to lists page

userBtn.addEventListener('click', () => {
  displayUser()
}); // change to user page

settingsBtn.addEventListener('click', () => {
  displaySettings()
}); // change to settings page

标签： javascripthtmlfunctioninnerhtml