未添加事件侦听器

Question

因此，当通过 if 语句通过 JavaScript 插入事件侦听器以检查用户类型的 localStorage 时，事件侦听器未添加到 id closeBtn 上时遇到了问题。我检查了 userType，因为我对不同的 userType 有不同的导航。

当我没有通过 JavaScript 加载导航的 html 代码而只是将它放在 html-doc 中时，closeBtn 可以工作，但由于某种原因，当我通过 JavaScript 插入时它不会。奇怪的是，id navBtn 确实有效，它也在 closeBtn 的同一位置获得了一个事件侦听器。

let nav = {
  navBtn: document.getElementById('navBtn'),
  closeBtn: document.getElementById('closeBtn'),
  overlay: document.getElementById('overlay'),
  nav: document.getElementById('nav'),
  initnav: function() {
    if (this.nav) {
      if (localStorage.getItem('userType')) {
        if (localStorage.getItem('userType') == "company") {
          // prettier-ignore
          this.nav.innerHTML = `
                <main>
                    <aside>
                        <img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
                    </aside>
                    <ul>
                        <li class="active"><a href="./indexbedrijven.html">Home</a></li>
                        <li><a href="./careerlaunch2022.html">Careerlaunch 2022</a></li>
                        <li><a href="vacatures_bedrijven.html">Vacatures</a></li>
                        <li><a href="./agenda.html">Mijn Agenda</a></li>
                        <li><a href="./chats_bedrijf.html">Chat</a></li>
                        <li><a href="./index.html">Careerlaunch voor studenten</a></li>
                    </ul>
                </main>
                <footer>
                <div div class = "accountBtns" >
                    <div class="account" >
                    <a href = "./account.html" >
                        <div class="profilePic myProfile"></div>
                        <h4 id="userName">Vince</h4>
                        </a>
                    </div>
                    <button>Afmelden</button>
                </div>
                <div id="closeBtn">
                    <div></div>
                    <div></div>
                </div>
                </footer>
                `;
        } else if (localStorage.getItem('userType') == "student") {
          // prettier-ignore
          this.nav.innerHTML = `
                <main>
                    <aside>
                        <img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
                    </aside>
                    <ul>
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="./careerlaunch2022.html">Careerlaunch 2022</a></li>
                        <li><a href="./planning.html">Planning</a></li>
                        <li><a href="vacatures.html">Vacatures</a></li>
                        <li><a href="favorieten.html">Favoriete vacatures</a></li>
                        <li><a href="./agenda.html">Mijn Agenda</a></li>
                        <li><a href="chats.html">Chat</a></li>
                        <li><a href="game.html">Careerlaunch game</a></li>
                    </ul>
                </main>
                <footer>
                    <a class="account" href="./account.html">
                        <div>
                            <div class="profilePic myProfile"></div>
                            <h4 id="userName">Vince</h4>
                        </div>
                        <button>Afmelden</button>
                    </a>
                    <div id="closeBtn">
                        <div></div>
                        <div></div>
                    </div>
                </footer>
                `;
        }
      } else {
        //prettier-ignore
        this.nav.innerHTML = `
            <main>
            <aside>
                <img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
            </aside>
            <ul>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="">Careerlaunch 2022</a></li>
                <li><a href="">Map</a></li>
                <li><a href="">Planning</a></li>
                <li><a href="vacatures.html">Vacatures</a></li>
                <li><a href="favorieten.html">Favoriete vacatures</a></li>
                <li><a href="">Mijn Agenda</a></li>
                <li><a href="chats.html">Chat</a></li>
                <li><a href="game.html">Careerlaunch game</a></li>
            </ul>
            </main>
            <footer>
                <div class="notLogged">
                    <div>
                        <a href="registreren_1-4.html" class="bluebox">Registreren</a>
                        <a href="login_student.html" class="graybox">log in</a>
                    </div>
                </div>
                <div id="closeBtn">
                    <div></div>
                    <div></div>
                </div>
            </footer>
            `;
      }
      this.navEventListnr();
    }

  },
  navEventListnr: function() {
    this.navBtn.addEventListener('click', () => {
      nav.animateNav("open");
    });
    console.log("closeListner");
    this.closeBtn.addEventListener('click', () => {
      nav.animateNav("close");
    });
  },
  animateNav: function(action) {
    console.log('open');
    if (action == "open") {
      this.navBtn.style.display = "none";
      this.overlay.style.display = "block";
      this.overlay.style.opacity = ".7";
      this.nav.style.right = "0vw";
    } else if (action == "close") {
      console.log('close');
      this.navBtn.style.display = "flex";
      this.nav.style.right = "-80vw";
      this.overlay.style.opacity = "0";
      setTimeout(() => {
        this.overlay.style.display = "none";
      }, 100);
    }
  }
};

nav.initnav();

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Careerlaunch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./styles/reset.css">
  <link rel="stylesheet" type="text/css" href="./styles/index.css">
  <script type="module" src="./js/index.js" defer></script>
</head>

<body style="background-color: green;">
  <div id="overlay"></div>
  <div id="navBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <nav id='nav'>
    <main>
      <aside>
        <img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
      </aside>
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="">Careerlaunch 2022</a></li>
        <li><a href="">Map</a></li>
        <li><a href="">Planning</a></li>
        <li><a href="vacatures.html">Vacatures</a></li>
        <li><a href="favorieten.html">Favoriete vacatures</a></li>
        <li><a href="">Mijn Agenda</a></li>
        <li><a href="chats.html">Chat</a></li>
        <li><a href="game.html">Careerlaunch game</a></li>
      </ul>
    </main>
    <footer>
      <div class="notLogged">
        <div>
          <a href="registreren_1-4.html" class="bluebox">Registreren</a>
          <a href="login_student.html" class="graybox">log in</a>
        </div>
      </div>
      <div id="closeBtn">
        <div></div>
        <div></div>
      </div>
    </footer>
  </nav>
</body>

</html>