Javascript 替换INNERHTML后，导航标记内容不起作用

我有一个包含UL列表项的现有导航标签。当导航标记内容保持原样时，原始HTML工作。当我用自己的HTML替换INNERHTML时，它类似于原始HTML原样，逐字逐句，NAV将不再像原始HTML那样下拉。我检查了每个字母和单词。我注意到其中一个锚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=“
”
+“
”
+“
”
+ ""
+“
”
+“
”
+“
”
+“
”
+“
”；
document.getElementById（“nav”）.innerHTML=pstrHTML；

---

---

如果我将包含WINDOW.ALERT的ONCLICK粘贴到SHOW ME列表项上，则单击时会生成警报。所以我知道INNERHTML是通过ONPAGELOAD工作的。但无论出于何种原因，NAV都无法与原始HTML匹配。

因为您要删除元素，绑定到它的事件也将被删除

要使事件持久化，可以使用

document.AddEventListener（）

将事件绑定到文档而不是元素。然后我们需要检查目标是否具有id

#ShowMe

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

运行下面的工作演示

document.getElementById（“nav”）.addEventListener（“单击”，函数（e）{
如果（如target=“#ShowMe”）{
警报（“你好，世界！”）；
var pstrHTML=“
”+
“
”+
“
”+
"" +
“
”+
“
”+
“
”+
“
”+
“
”+
“
”+
“
”；
document.getElementById（“nav”）.innerHTML=pstrHTML；
}
});









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

要使事件持久化，可以使用
document.AddEventListener（）
将事件绑定到文档而不是元素。然后我们需要检查目标是否具有id
#ShowMe

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

运行下面的工作演示


document.getElementById（“nav”）.addEventListener（“单击”，函数（e）{
如果（如target=“#ShowMe”）{
警报（“你好，世界！”）；
var pstrHTML=“
”+
“
”+
“
”+
"" +
“
”+
“
”+
“
”+
“
”+
“
”+
“
”+
“
”；
document.getElementById（“nav”）.innerHTML=pstrHTML；
}
});









您已将事件侦听器附加到原始元素，并且
innerHTML
创建要显示的新元素。虽然这些新元素看起来相同，但它们与附加事件的原始元素不同。如果无法使用
append
/
appendChild
/
insertBefore
/
insertAdjacentElement
/
insertAdjacentHTML
方法操作内容，则必须在祖先元素（在
nav
上）上委托事件。您已将事件侦听器附加到原始元素，并且
innerHTML
创建要显示的新元素。虽然这些新元素看起来相同，但它们与附加事件的原始元素不同。如果无法使用
append
/
appendChild
/
insertBefore
/
insertAdjacentElement
/
insertAdjacentHTML
方法操作内容，则必须在祖先元素（在
nav
上）上委托事件。它不必是
文档
，任何公共祖先都可以，越近越好。所以，我做了一些相当愚蠢和简单的事情。这是一个非常简单的网站。无论出于何种原因，如果HTML5上的NAV对象在页面加载后被触摸，NAV对象就会失败。因此，我在MS ACCESS中编写了一个简单的VBA应用程序，打开站点上记录到列表/表格中的每个页面，然后使用HTML模型修改整个NAV部分，该模型在所有页面中都是标准的。我花了这么多时间尝试各种JSCRIPT代码，并决定使用VBA来更新NAV预部署。谢谢你的帮助。它不必是
文档
，任何共同的祖先都可以，越近越好。所以，我做了一些相当愚蠢和简单的事情。这是一个非常简单的网站。无论出于何种原因，如果HTML5上的NAV对象在页面加载后被触摸，NAV对象就会失败。因此，我在MS ACCESS中编写了一个简单的VBA应用程序，打开站点上记录到列表/表格中的每个页面，然后使用HTML模型修改整个NAV部分，该模型在所有页面中都是标准的。我花了这么多时间尝试各种JSCRIPT代码，并决定使用VBA来更新NAV预部署。谢谢你的帮助。