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;

Onclick侦听动态加载的HTML

2 个答案: