首页 > 代码库 > Ajax中主页加载分页面后，分页面js脚本不执行的解决办法
Ajax中主页加载分页面后，分页面js脚本不执行的解决办法
没看懂，稍后再看
Ajax中主页加载分页面后，分页面js脚本不执行的解决办法
最近捣鼓JQuery，其中强大的Ajax系列函数令人印象深刻，所以做项目时毫不犹豫地采用了一下该技术，在主页中动态加载分页面进来，咋看效果 不错，都能实现了第一层次的加载，但深入下去问题就出来了：动态加载进来的页面中外联了js文件，其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的)
我郁闷了，打开Firefox中的Firebug查看了加载后的主页面中的DOM，所有元素的加载都是正常的啊~
自己改来改去一个个参数试都过了，在网上也找了半天，都没能解决问题。后来一想，咱把外联的js文件的脚本改成内联试试，一试，Ok了！加载进来的分页面终于能正常执行JQuery的函数！
还有，主页面加载了JQuery库就可以了，分页面是不需要加载库的，因为分页面是集成到主页面的DOM中的，将和主页面共享同一个库脚本。
贴一贴代码，让大家看得明白点：
问题解决前：
（分页面）
<html>
<head>
<title>AccountPage</title>
<link href="http://www.mamicode.com/Global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script> <!--JQuery库，你懂的-->
<script type="text/javascript" src="http://www.mamicode.com/js/Global.js"></script> <!--外联的js文件-->
</head>
<body>
<div id="accountPage">
<a id="modify">修改</a>
</div>
</body>
</html>
（分页面外联的js脚本）
$(document).ready(function () {
$("#modify").click(function(){
alert("This is alerted from AccountPage !"); //分页面加载进主页后，这段代码并
$("#accountPage").append("<a href=http://www.mamicode.com/‘#‘ >GooodWork");// 没有按期望运行
});
});
（主页的Ajax加载脚本）
$(document).ready(function () {
$("#account").click(function () {
$("#detail").load(‘component/accountPage.html‘); })
});
解决后(只改了分页面)：
（分页面）
<html>
<head>
<title>AccountPage</title>
<link href="http://www.mamicode.com/Global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
{
$("#modify").click(function(){
alert("This is alerted from AccountPage !");
$("#accountPage").append("<a href=http://www.mamicode.com/‘#‘ >GooodWork");
});
}
</script>
</head>
<body>
<div id="accountPage">
<a id="modify">修改</a>
</div>
</body>
</html>
其实有点啰嗦了，一句话：要在Ajax加载进来的分页面运行的脚本，不能外联，必须内联！
Only you~can take me 取西经~~~