Javascript 异步重新加载HTML和JS代码使JS事件侦听器不会对单击重新加载的HTML代码作出反应

我正在建立一个网站的生活游戏，只有一个页面是可见的用户。我使用AJAX让用户提交模式（作为一系列整数处理），模式保存到服务器并自动显示在面板中。面板中的图案可单击，用户可以选择图案并放置在网格上。在用户提交内容之前，一切正常。当用户提交模式时，面板和使模式可点击的JS代码被重新加载。面板按预期重新加载，我在“inspect元素”中看到JS代码也被重新加载。但是JS被忽略了！JS代码包含由动态加载的JS代码中的事件侦听器调用的函数（侦听面板中的单击，在sumbision时重新加载）。让我困惑的是，它在面板重新加载之前工作，但在面板重新加载之后不工作。似乎重新加载面板会使事件侦听器失去与面板的关联

我意识到这个问题变得越来越混乱。我将试图总结：

页面加载：面板加载PHP文件_get_contents（），JS事件侦听器和处理程序异步加载。事件侦听器对事件作出反应（单击面板中的模式）

用户提交content:panel并异步重新加载JS代码（使用单行获取panel:file\u get\u内容在单独的php文件中）。现在，事件侦听器不会对事件做出反应（单击面板中的模式）

我的问题是，我如何回避这个问题

---

该网站仅供参考。我命名的网站，所以你可以访问的来源，我希望这不是考虑广告

您需要使用on（）方法而不是click（）来绑定事件。一旦重新构建DOM，将不会触发单击绑定事件。更多信息请点击这里

---

至于重新加载javascript，Pointy有一个很好的观点，那就是你没有发布任何相关的代码，你的网站要么速度很慢，要么已经死了。当您更新DOM时（如通过设置

innerHTML

），有两件事需要知道：嵌入的

标记将不会运行，并且任何附加到之前存在的元素的事件处理程序都将变得不相关，因为DOM的这一部分是完全重建的。这是否意味着我不能异步加载JS代码，或者如果我将代码嵌入到我的主块中，它会工作吗？ATM我有一个空的，脚本加载到其中。当我在初始页面加载时将代码异步加载到其中时，它就会工作。顺便说一句，该网站加载的内容对我来说很好。这意味着，如果您正在加载带有嵌入式JavaScript的内容，您必须将其删除并显式地

eval（）

It。这是像jQuery这样的库可以为您做的事情。更好的办法是按照Michal在回答中说的做：使用事件委托。