Javascript 使用其他脚本包含的节点加载脚本

我需要做一个有很多内容的网页。为了在修改此内容时更高效，我决定将其放在单独的文件中，然后包括这些文件，遵循本教程：

例如，其中一个文件可能包含一些指向书籍描述的可单击链接，这些链接是模态框。所以我需要在一个加载脚本中获取这些可点击的链接，并使它们触发一些事件。但这个加载脚本似乎是在JavaScript获取包含的节点之前调用的，即使我在读取一些线程后添加了一个事件侦听器（我尝试在“DOMContentLoaded”或“load”下运行它）：document.getElementById或document.getElementsByClassName仍然返回null，因此它无法定义onclick函数。让我展示一个示例代码：

script.js

函数includeHTML（）{/*一些代码将div替换为Some-content.html，即：Hello*/}
var按钮=null
addEventListener（'load'，function（））{
按钮=document.getElementById（“可点击”）；
button.onclick=function（）{alert（'Hello'）；}
});

index.html

这是一个触发按钮：

includeHTML（）；

在Firefox上，定义button.onclick as button仍然为空时，此操作将失败。 你知道怎么修吗

我不仅应该添加链接，还应该添加模式框。下面是一个脚本代码，更完整，我的猜测是：

script.js

var-boxNames=[“参考书目”、“关于”、“第一册”、“第二册”]；
var box=null/*包含要显示的框*/
var trigs=null/*包含每个框的触发器按钮*/
var close=null/*包含每个框的关闭按钮*/
函数设置触发器（i）{
trigs[i].onclick=function（）{setBoxVisible（true，i）；}
}
函数setClose（i）{
trigs[i].onclick=function（）{setBoxVisible（false，i）；}
}
函数加载（）{
盒子=新阵列（4）；
trigs=新阵列（4）；
关闭=新阵列（4）；
对于（var i=0；i

对于includeHTML（）的代码，您可以查看我共享的教程“我复制/粘贴”

---

我认为如果处理这些东西，这种函数会更优雅，但我需要在加载所有内容后启动它，就像我手动运行一样。

您的代码仅在加载页面时添加事件侦听器，很可能是在链接存在之前

您需要从最近的静态容器委派

在您的代码中，它是

文档

给链接一个类而不是ID，然后执行

window.addEventListener（'load'，函数（e）{
document.addEventListener（'click'，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“可点击”））{
e、 preventDefault（）；//因为它是一个链接
警惕（“你好”）；
}
});
});
谢谢，效果很好，但对于更复杂的情况，还有其他方法吗。例如，我的模态框也包含在外部文件中。因此，可以方便地将它们保存在变量中，以设置它们是否可见。但是我再次遇到同样的问题，因为这些变量仍然为空。顺便说一句，当手动运行我的加载脚本时，没有问题，那么有没有办法让它等待加载新节点？很可能是的。但是您需要显示更多的代码<代码>includeHTML（）

它是做什么的？你可以委派任何事情。当您从文档中委派时，页面上的任何内容都会随时受到监视。你可以在我写的代码中添加更多的测试：

else if（tgt.classList.contains（“modal”）{…}

我编辑了这篇文章，所以你可以看到我的想法，准确地查看我的更新。这太简单了，这能回答你的问题吗？我听从了@mplungjan的建议，这似乎是有联系的，但我必须承认我必须学习一点jquery，至少是这样。谢谢，它确实回答了我的问题！