如何让 onclick 在编辑的 innerHTML 中工作答案

【问题标题】：How to get onclick to work in edited innerHTML如何让 onclick 在编辑的 innerHTML 中工作
【发布时间】：2015-07-23 16:07:17
【问题描述】：

所以在导航 javascript 文件中，我有这个，它具有 onclick 事件属性来加载新页面：

function NAVLOAD()  {
    // Runs when you load page.
    document.getElementById("main nav").innerHTML = '<table class = "navbar"><tr>'+
    '<th onclick = "goTo("main_page")"> Home </th>'+
    '<th onclick = "goTo("archive")"> Archive </th>'+
    '<th onclick = "goTo("about")"> About </th>'+
    '<th  onclick = "goTo("faq")"> FAQ </th>'+
    '<th  onclick = "goTo("fanart")"> Fanart! </th>'+
    '</tr>'+    
    '<tr><td class = "spacer"></td></tr></table>';
}

function goTo(page) {
    window.location.assign(""+page+".html");
}

而且，使用它的 HTML 代码如下所示：

<html> <!-- Stuff -->
<body onload = "NAVLOAD();"> <div id = "main">
    <!-- Stuff -->

    <script src = "HTL_navigation_script.js"></script>
    <div id = "main nav" class = "comic"></div>
<!-- Some other stuff --> </body></html>

导航表显示正确，但是当我点击链接时，它什么也没做！然而，当我将 NAVLOAD() 函数中看到的 HTML 放入我的 HTML 文件中，并且只从文件中导入 goTo() 方法，链接确实有效！这里有什么问题？

【问题讨论】：

您使用 Javascript 构建导航菜单的原因是什么，为什么要使用表格？
我有多个具有相同导航栏的页面，而我学校提供的免费网络托管不提供 SSI 或 PHP。
导航菜单会经常变化吗？如果没有，最好将导航硬编码到每个页面中。此外，您不应该使用表格来构建导航，表格用于表格数据，并且在当今时代应该很少使用。通常，unordered lists 用于构建导航。
也就是说，您的 Javascript 的问题是 goTo() 函数超出范围。

标签： javascript html onclick innerhtml

【解决方案1】：

您需要在包含 NAVLOAD() 方法的 JS 文件中进行以下更正。将引号从双引号 (" ") 更改为单引号 (' ')，为此您必须添加转义字符 ( '\') 也是如此。

function NAVLOAD()  {
    // Runs when you load page.
    document.getElementById("main nav").innerHTML = '<table class = "navbar"><tr>'+
    '<th onclick = "goTo(\'main_page\')"> Home </th>'+
    '<th onclick = "goTo(\'archive\')"> Archive </th>'+
    '<th onclick = "goTo(\'about\')"> About </th>'+
    '<th  onclick = "goTo(\'faq\')"> FAQ </th>'+
    '<th  onclick = "goTo(\'fanart\')"> Fanart! </th>'+
    '</tr>'+    
    '<tr><td class = "spacer"></td></tr></table>';
}

希望对你有帮助:)

【讨论】：

正在处理我的本地副本...您是否使用过开发人员工具...最终调试问题？