php - 如何在单页 Web 应用程序中处理多个脚本

Question

我是 Web 开发的新手，我启动了一个应用程序，其中有一个带有菜单的 index.php 和一个名为 #content 的 div，我使用 load(); 将所有不同的页面加载到 div #content 中；我需要加载相应的 java 脚本文件以及正在加载到 div #content 中的文件。

问题:在加载到 div 的 HTML 中，我有一些相似的类名和 ID，所以当我单击任何菜单项并在那里执行一些操作并转到另一个菜单项并执行相同的操作时，我得到正在执行上一个菜单项的脚本!

是否有更好的方法将脚本加载到菜单项上的 div 中，单击并单击另一个菜单项删除以前的脚本并从当前单击的菜单项加载新脚本？

我用来加载 div #content 的脚本:

$('.nav-button').on('click', function(e){
e.preventDefault();
$('#content').load('../scripts/loader.php');
$('#content').load($(this).attr('href'));
});

我加载到 menu-item1 上的 div 中的 sample1.php 页面已单击:

<div id='datagrid'>
<input></input>
<input></input>
<input></input>
</div>
<script type='text/javascript' src='scripts/menu-item1/data_script.js'></script>

我加载到 menu-item2 上的 div 的 sample2.php 页面被点击:

<div id='datagrid'>
<input></input>
<input></input>
<input></input>
</div>
<script type='text/javascript' src='scripts/menu-item2/data_script.js'></script>

Answer 1

另一种加载脚本的方式:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
script.onload = callback_function;

document.getElementsById("#scriptContainer")[0].appendChild(script);

关于删除现有脚本:

尝试将您的脚本加载到某个容器中，当您想要替换它们时，只需清除容器内容并加载您的新脚本。

您也可以尝试使用 requirejs 延迟加载。 Example here