javascript - 动态加载 HTML 的 Onclick 侦听器

Question

我正在尝试使用 JavaScript 动态加载菜单，然后在加载后将 onclick 事件侦听器设置为菜单的元素。我似乎无法弄清楚如何做到这一点。我正在通过 AJAX 调用加载菜单，菜单内容加载正常，但是当我像预期的那样单击菜单元素时没有任何反应。

这是我的代码部分，我希望它是原因......

//Load Menu and main images
window.onload = function()
{
    load_menu();   
}

document.getElementById('menu').onload = function()
{
    document.getElementById('projects-button').onclick = load_projects_view();
}

//Load menu function
function load_menu()
{   
    request = getHTTPObject();
    request.onreadystatechange = append_menu;
    request.open("GET", "./php/menu.php", true);
    request.send(null);
}

//Load Project View
function load_projects_view()
{
    request = getHTTPObject();
    request.onreadystatechange = append_project_view;
    request.open("GET", "./php/project_view.php", true);
    request.send(null);
}

Answer 1

那么当 javascript 行时，具有 id 菜单的元素已经可用：

document.getElementById('menu').onload = ...

被执行。此行在

window.onload

发生。

好吧，我可能会调用代码：

document.getElementById('projects-button').onclick = load_projects_view();

目前添加了菜单项（您的 append_menu 功能？）

但很难说，因为它只是一段代码。

jQuery 和 dojo 也绝对是要走的路，而且我认为 jQuery 是了解语言基础的一个很好的起点，因为它隐藏了所有奇怪的浏览器行为。

Answer 2

删除这个。

document.getElementById('menu').onload = function()
{
    document.getElementById('projects-button').onclick = load_projects_view();
}

并将其放在append_menu().

    document.getElementById('projects-button').onclick = load_projects_view;