异步加载页面,页面中的js的调用问题

     项目中用到了菜单树,置于页面的左端,点击菜单后异步加载对应菜单的页面,主框架页面为index.jsp,其中有$(document).ready(function(){

});jQuery的调用,

<script type="text/javascript">
$(document).ready(function(){
	$("#sideFrame").load("pages/left.jsp",function(data){});
	resizeBody(0,0);
});
window.onresize=function(){
	resizeBody("si","ze");
	resizeBodyY("si","ze");
}
</script>

问题出现在加载的页面中,如果你也在加载的页面other.jsp中运用了

$(document).ready(function(){

    123();.........

});

function 123(){
 ...................
}

其中此处123()方法必须要定义在调用处的上方,否则会出现找不到123()方法的问题。

     解释一下出现此问题的原因:index.jsp页面中$(document).ready()方法的完成是在index.jsp加载完毕之后就已经执行完毕了的,当你在异步加载进来的页面中继续使用这个方法,是不会起效的,也就是说$(document).ready()方法是针对页面的而不是针对你某个div异步加载的页面的,所以你在加载页面other.jsp调用$(document).ready()时,其他的自定义的js方法并不一定起效,也就是说js方法的定义一定要有顺序,被调用的方法一定要定义在调用方法的前面,调用方法才会找到被调用的方法,上面的js要应该如下所示:

 
<script type="text/javascript">

function 123(){ ................... }

function 456(){ 123();......... }
</script>

 其中$(document).ready(function(){}已经去掉了,因为已经没有什么作用。

posted @ 2012-12-18 15:38  白白的技术千千的生活  阅读(2226)  评论(4编辑  收藏  举报