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

Question

我有一个包含 UL 列表项的现有 NAV 标签。当 NAV 标签内容保持原样时，原始 HTML 工作。当我用我自己的 HTML 替换 INNERHTML 时，它类似于原始 HTML AS-IS，逐字逐句地，NAV 将不再像原始 HTML 那样下降。我检查了每一个字母和单词。我确实注意到其中一个 ANCHOR HREF 确实包含 #。这是原始资产净值中的内容。

<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
  }
});