ITKeyword,专注技术干货聚合推荐

注册 | 登录

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

此文已失效,请勿参考。非常抱歉!这篇文章写于几年前,当时也没有标注使用的jquery版本号,可能误导了很多人,当时我使用的是比较旧的jquery版本,存在这个问题,2011年6月份发布的1.6.2版本后已经不存在这个问题。最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的)我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~自己改来改去一个个参数试都过了,在网上也找了半天,都没能解决问题。后来一想,咱把外联的js文件的脚本改成内联试试,一试,Ok了!加载进来的分页面终于能正常执行JQuery的函数!还有,主页面加载了JQuery库就可以了,分页面是不需要加载库的,因为分页面是集成到主页面的DOM中的,将和主页面共享同一个库脚本。贴一贴代码,让大家看得明白点:问题解决前:(分页面)<html><head>

<title>AccountPage</title>

<link href="../Global.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../js/jquery.min.js"></script>

<!--JQuery库,你懂的-->

<script type="text/javascript" src="../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='#' >GooodWork</a>");// 没有按期望运行

});

});(主页的Ajax加载脚本)$(document).ready(function () {

$("#account").click(function () {

$("#detail").load('component/accountPage.html');

})});解决后(只改了分页面):(分页面)<html><head>

<title>AccountPage</title>

<link href="../Global.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

{

$("#modify").click(function(){

alert("This is alerted from AccountPage !");

$("#accountPage").append("<a href='#' >GooodWork</a>");

});

}

</script></head><body>

<div id="accountPage">

<a id="modify">修改</a> </div></body></html> 其实有点啰嗦了,一句话:要在Ajax加载进来的分页面运行的脚本,不能外联,必须内联!Only

you~can take me 取西经~~~

此文已失效,请勿参考。非常抱歉!这篇文章写于几年前,当时也没有标注使用的jquery版本号,可能误导了很多人,当时我使用的是比较旧的jquery版本,存在这个问题,2011年6月份发布的1.6.2版本...

相关阅读排行


用户评论

游客

相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。