动态加载jQuery之后重新绑定/定义事件-卢雨高技术博客

由于jQuery版本不同，中间可能存在些许差距，我们做页面的插件也好还是什么功能也好，不可能每个功能部分都加载个jquery文件。所以动态调用jQuery是有必要的。

当页面有加载jQuery的时候直接调用代码，如果没有就要实现加载jQuery，当然如果你不怕你网页代码比较乱的话你可以多次加载jQuery。

那么这其中就牵涉到一些问题

问题一：如何判断有没有加载jQuery？

可通过如下代码判断：

//判断是否加载了jQ
function hasjQ(){
	return window.jQuery;
}

问题二：动态加载jQuery之后直接调用 $ 是会出错的，怎么处理？

动态调用jQuery我们是通过document.writeln来实现的，此时我们打印出jQuery代码之后并没有加载完改文件，此时使用 $ 是会报错的，显示为未定义 $ 。此时，有一种方法是用window.onload()来等待记载完毕，可这里我要提醒大家，window.onload()方法在整个页面上只会执行一次，只会执行最后一个。不信的朋友可以写两个试试。如果网页本身就调用了该方法那么你将给他覆盖掉，这不是我们想要的，此时就需要通过一个方法来实现添加事件。

//注册事件方法
var eventUtil={
	addHandler: function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on" + type, handler);
		}else{
			element["on" + type] = handler;
		}
	}
}

来看一个实际的例子吧，

Html部分

<h6 style="margin:0; padding:30px 0 0px;">动态加载jQuery之后重新绑定/定义事件</h6>
<p>window.onload事件只会执行最后一个，所以直接在加载jQuery之后通过window.onload是不明智的。</p>

<div style="height:50px; width:80px; background-color:#FC6; display:none; line-height:50px; text-align:center; color:#393">
	<span style="display:none;" id="sp">Hello!</span>
</div>

Js部分

//注册事件方法
var eventUtil={
	addHandler: function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on" + type, handler);
		}else{
			element["on" + type] = handler;
		}
	}
}
//调用jQ
document.writeln('<scr'+'ipt type="text/java'+'script" src="http:'+'//apps.bdimg.c'+'om/libs/jquery/1.9.0/jqu'+'ery.min.js"><'+'/sc'+'ript>');

myload=function(){
	
	document.title=hasjQ()?'Ok':'No';
	
	$("div").fadeIn('slow',function(){$('span',this).fadeIn('slow');});

	$('#sp').click(function(){
		$(this).fadeOut('slow',function(){$(this).parent().fadeOut();});
	});
	
}

//判断是否加载了jQ
function hasjQ(){
	return window.jQuery;
}

//执行事件的注册
eventUtil.addHandler(window,'load',myload);
eventUtil.addHandler(window,'load',function(){
	setTimeout(function(){alert('这是来自第二个load事件');},2000);
});

效果：

动态加载jQuery之后的效果