NAV标签内容在替换INNERHTML后不起作用

Question

我已有一个包含UL列表项的NAV标签。当NAV标签内容保持不变时，原始HTML将起作用。当我用自己的HTML（类似于原始HTML AS-IS）逐字替换INNERHTML时，NAV将不再像原始HTML那样下降。我检查了每个字母和单词。我确实注意到，其中一个ANCHOR 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;

---

如果我在SHOW ME列表项上粘贴一个包含WINDOW.ALERT的ONCLICK，则单击该按钮时会生成一个ALERT。所以我知道INNERHTML正在通过ONPAGELOAD运行。但是无论出于何种原因，NAV都无法匹配原始HTML。

Answer 1

由于要删除元素，因此绑定到它的事件也将被删除。

为了使事件持久化，可以将事件绑定到文档而不是具有document.AddEventListener()的元素。然后，我们需要检查目标是否具有ID #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()等同于jquery中的$(document).on("action","#id",function(){ });。

编辑：包含Teemu的答案，这也将起作用；

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