Содержимое тега NAV не работает после замены INNERHTML

Question

У меня есть существующий тег NAV, содержащий элементы списка UL. Оригинальный HTML работает, когда содержимое тега NAV остается без изменений. Когда я заменяю ВНУТРЕННЕЕ HTML своим собственным HTML, что дословно напоминает HTML КАК ЕСТЬ, NAV больше не будет СНИЖАТЬ, как оригинал, больше. Я проверил каждую букву и слово. Я заметил, что один из якорей HREF содержит #. Вот что в оригинальном NAV.

<nav id="nav">
<ul>
<li class="current"><a href="index.html">Welcome</a></li>
<li class="submenu">
<a href="#">Show Me</a>
<ul>
<li><a href="hybrid/index.html">The Hybrid</a></li>
</ul>
</li>
</ul>
</nav>

Мой код выглядит так:

---

var pstrHTML = "<ul>"
+ "<li class='current'><a href='index.html'>Welcome</a></li>"
+ "<li class='submenu'>"
+ "<a href='#'>Show Me</a>"
+ "<ul>"
+ "<li><a href='hybrid/index.html'>The Hybrid</a></li>"
+ "</ul>"
+ "</li>"
+ "</ul>";
document.getElementById("nav").innerHTML = pstrHTML;

---

Если я прикреплю ONCLICK, содержащий WINDOW.ALERT, на SHOW Элемент списка ME, он генерирует ALERT при нажатии. Так что я знаю, что INNER HTML работает через ONPAGELOAD. Но по любой причине, NAV не будет работать, чтобы соответствовать оригинальному HTML.

Answer 1

Поскольку вы удаляете элемент, привязанное к нему событие также будет удалено.

Чтобы сделать событие постоянным, вы можете привязать событие к документу вместо элемента с помощью document.AddEventListener(). Затем нам нужно проверить цель, если у нее есть идентификатор #ShowMe.

document.AddEventListener("click",function(e) {
   if(e.target = "#idOfYourElement"){
      // do something
   }
});

Запустить рабочую демонстрацию ниже;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
    alert("Hello World!");
    var pstrHTML = "<ul>" +
      "<li class='current'><a href='index.html'>Welcome</a></li>" +
      "<li class='submenu'>" +
      "<a id='ShowMe' href='#'>Show Me</a>" +
      "<ul>" +
      "<li><a href='hybrid/index.html'>The Hybrid</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 1</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 2</a></li>" +
      "</ul>" +
      "</li>" +
      "</ul>";
    document.getElementById("nav").innerHTML = pstrHTML;
  }
});

<nav id="nav">
  <ul>
    <li class="current"><a href="index.html">Welcome</a></li>
    <li class="submenu">
      <a id="ShowMe" href="#">Show Me</a>
      <ul>
        <li><a href="hybrid/index.html">The Hybrid</a></li>
      </ul>
    </li>
  </ul>
</nav>

document.AddEventListener() эквивалентно $(document).on("action","#id",function(){ }); в jquery.

РЕДАКТИРОВАТЬ: Включая ответ Teemu, это также будет работать;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
     // do something
  }
});