用jQuery的load方法动态加载页面，以及脚本问题

一、了解load方法

load(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML
文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。

参数 url,[data,[callback]]String,Map/String,CallbackV1.0

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

二、页面结构

我的页面分两个idv，左div和右div，业务场景需求是：left初始化加载页面，并且在right中点击某button元素时，left能无刷新地再次加载页面，即动态加载页面到左边div中。

<div>
    <div id="left"> 
  	 	<button id="save"></button>
   </div>
    <div id="right"> 
   		<button id="btn"></button>
   </div>
 </div>

三、javaScript部分

 $(document).ready(function(){  
         //绑定btn点击事件
		 $('#btn').on('click', function(){		 		
          		refreshPage();
    	  });
});

/*
  加载页面
*/
function refreshPage(){
	//提交到后台的路径，type是需要传递的参数
	var url = '../XXX/edit.do?type=XXX';  
    $('#left').load(url ,function(){
			alert('加载成功！');
	});
}

四、load后的页面，js失效的问题

运行上述代码后，发现页面虽然成功载入left了，样式也正确，但是js全都失效。

<!--引入的脚本不起作用-->
<script src="../XXX/edit.js"/>  
<script>
   //写在这里的脚本也都不起作用
<script/>

原因：load方法加载的外部文件会把Script部分删除掉
解决办法：在页面加载完毕后再引入js文件，或绑定事件

$(document).ready(function(){  
         //绑定btn点击事件
		 $('#btn').on('click', function(){		 		
          		refreshPage();
    	  });
});

/*
  加载页面
*/
function refreshPage(){
	//提交到后台的路径，type是需要传递的参数
	var url = '../XXX/edit.do?type=XXX';  
    $('#left').load(url ,function(){
			 var sc =  document.createElement("script");
			 sc.src= "../XXX/edit.js";
			 $("body").append(sc);
	});
}

不建议用jQuery.getScript方法引入，因为这个方法引入的js中声明的变量是全局的，容易引出其他问题。

五、load后的页面，重复绑定事件的问题

我在…/XXX/edit.js 中，定义有left中元素的绑定事件：

 		//绑定btn点击事件
		 $('#save').on('click', function(){		 		
          		alert('保存');
    	  });

允许上述代码后，发现第二次点击btn按钮加载页面，点击save按钮就连续弹出“保存”的提示窗口两次，页面加载多少次，alert(‘保存’)就执行多少次，这是因为save按钮被重复绑定了。
解决办法：刷新之前，先解除事件所有绑定。

$(document).ready(function(){  
         //绑定btn点击事件
		 $('#btn').on('click', function(){		 		
          		refreshPage();
    	  });
});

/*
  加载页面
*/
function refreshPage(){
    //刷新之前，先解除事件所有绑定，on事件对应的解除用off
    $('#save').off();   
	//提交到后台的路径，type是需要传递的参数
	var url = '../XXX/edit.do?type=XXX';  
    $('#left').load(url ,function(){
			 var sc =  document.createElement("script");
			 sc.src= "../XXX/edit.js";
			 $("body").append(sc);
	});
}