异步加载html不能调试,异步重新加载HTML和JS代码使JS事件监听器不会对点击重新加载的HTML代码做出反应...

我正在构建一个网站，其中只有一个页面对用户可见。我使用AJAX让用户提交模式(按照一系列整数处理)，并将模式保存到服务器并自动显示在面板中。面板中的图案是可点击的，用户可以选择图案并放置在网格上。一切工作正常，直到用户提交内容。当用户提交一个模式时，面板和使得模式可点击的JS代码被重新加载。面板按预期重新加载，我在“检查元素”中看到JS代码也被重新加载。但是JS被忽略了！ JS代码包含由动态加载的JS代码中的事件侦听器调用的函数(侦听面板中的点击，在sumbission中重新加载)。令我困惑的是，它在面板重新加载之前就起作用了，但之后却没有。似乎重新加载面板会使事件侦听器失去与面板的关联。异步重新加载HTML和JS代码使JS事件监听器不会对点击重新加载的HTML代码做出反应

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

页面加载：面板加载了PHP file_get_contents()，JS事件监听器和处理程序异步加载。事件监听器对事件做出反应(点击面板中的模式)。

用户提交的内容：面板和JS代码异步重新加载(在单独的php文件中获取单行的file_get_contents面板)。现在，事件监听器不会对事件做出反应(点击面板中的模式)。

我的问题是，我该如何解决这个问题？

仅供参考，网站为tunetiles.com。我将网站命名为您可以访问该来源，我希望它不被视为广告。

+0

你没有张贴任何有关的代码，您的网站或者是很慢的或死的。当你更新DOM时(比如通过设置innerHTML)，有两件事要知道：嵌入式'，脚本被加载到。它可以在初始页面加载时异步加载代码的情况下工作。该网站加载对我来说很好btw。 –

+0

这意味着如果您使用嵌入式JavaScript加载内容，则必须将其去掉并显式地'eval()'。这是像jQuery这样的图书馆会为你做的事情。更好的是，按照Michal在答案中所说的：使用事件代表团。 –