点击监听器来动态加载HTML

Onclick Listeners to Dynamically Loaded HTML

本文关键字：加载 HTML 动态 监听器      更新时间：2023-09-26

我试图用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);
}

删掉这个

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

把这个放在append_menu()的底部。

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

当javascript行

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

执行。这一行在

之前执行。
window.onload

。

我可能会调用代码:

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

此刻菜单项被添加(你的append_menu函数?)

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

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

相关文章：