异步加载页面,页面中的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(){}已经去掉了,因为已经没有什么作用。