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

我是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'));
});

sample1.php页面我加载到menu-item1上的div点击：

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

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

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

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

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