Question

我有一个页面加载（使用XHR请求）一个带有表单的模态框。

表单由HTML标签+一些Javascript组成，用于验证和提交（使用另一个XHR请求）。

我做到了，它已经有效，但是生成的DOM很难看，因为脚本标签位于模态内部，就像在这个简化示例中一样：

<html>
<head>...</head>
<body>
<div id="modal"> 
    <form>...</form> <!-- This is my dynamically loaded HTML -->
    <script>...</script> <!-- This is the dynamically loaded JS -->
</div>
<script>...</script> <!-- My main scripts -->
</body>
</html>

我有两个问题：

1）最佳做法是在body关闭之前放置所有JS代码，但是当我进行动态加载时，我最终在模态div中使用JS。有没有一种有效的方法只将HTML加载到div并在body的末尾注入JS？那有什么工具吗？或者我不应该担心吗？

2）我使用jQuery，所以我尝试将$(document).ready()用于所有JS代码，但如果我将它用于模态JS，它就不会运行，可能是因为事件是没有第二次触发。是否有任何事件可以用来使我的动态加载的JS在完成游戏后运行？或者我应该把它放在最后？

Answer 1

回答这两个问题：

我没有看到你不应该在模态中的DOM中插入JS脚本的原因。我认为与你放置所有注入脚本的全球地方相比，这种方式更好。这样你仍然可以知道哪个模态加载了哪个脚本。

它也解决了你的第二个问题。当您第一次插入DOM节点，然后插入可用于它们的<script>元素时，您无需等待就绪事件。

我能想到的另一种方式是让全局模态脚本可用，加载模态然后执行类似ModalScript.initialize("#modal")的操作。

Answer 2

您可以使用像Browserify这样的框架根据需要捆绑和动态加载（“延迟加载”）资源。

This 是一个很好的示例/教程。

动态加载HTML + Javascript的最佳做法

2 个答案: