我是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);
关于删除现有脚本:
尝试在特定容器中加载脚本,当您想要替换它们时,只需清除容器内容并加载新脚本即可.
您还可以尝试使用requirejs进行延迟加载. Example here