jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！
旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素。
但自jq1.7版本开始，官方已明文表示不再推荐使用使用.live()方法，官方解释为：live()调用过程首先将事件方法绑定到了Document，然后，查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。
官方推荐将.live()改成Delegate()方法，适用脚本创建的新元素。
jq1.8开始，官方又再次申明：如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法。
本文将详细介绍jq1.8中.on()用法，相关用法源码如下：
旧版写法：
<pre>
// 旧版写法: 事件不能适用脚本创建的新元素
$("selector").bind("click",function(){
alert("不响应事件!");
})
// 旧版事件.live()：适用脚本创建的新元素写法,live()调用过程如下：我们首先将click方法绑定到了Document，然后，查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费
$("slector").live("click",function(){
alert("响应事件!");
})
</pre>
新版写法：
<pre>
// 新版写法一：单纯将bind改成on，事件不能适用脚本创建的新元素
$("selector").on("click",function(){
alert("不响应事件!");
})
// 新版写法二：将live改成Delegate，适用脚本创建的新元素
$("selector").delegate("child","click",function(){
alert("响应事件!");
})
// 新版写法三：适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
// $(selector).on('event','child',function(){}) selector为匹配元素的父元素，可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说，比较浪费，推荐定成匹配元素就近的父元素！！
//如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法
$("selector").on("click","child",function(e){
alert("响应"+e.type+"事件1!");
});
$("selector").on("click.namespace","child",eventFunc=function(e){
alert("响应"+e.type+"事件2!");
});
$("selector").on("mouseout.namespace","child",function(e){
alert("响应"+e.type+"事件!");
});
</pre>
新版多事件同时绑定写法
<pre>
//方式一
$("selector").on({
mouseover:function(){
$(this).addClass("over");
},
mouseout:function(){
$(this).removeClass("over");
}
},"ul li");
//方式二
$("selector").on("mouseover mouseout","ul li",function(e){
if(e.type=="mouseover"){
$(this).addClass("over");
}else{
$(this).removeClass("over");
})
</pre>
新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件
<pre>
// 解绑所有点击事件
$(".unbindAllclick").click(function(){
$(".demonstrate").off('click',"ul li");
})
// 事件函数：可解绑指定事件函数的同类事件,第3个参数：事件函数 (不需要引号)
$(".unbindSpecifyclick").click(function(){
$(".demonstrate").off('click',"ul li",eventFunc);
})
// 命名空间：解绑同一命名空间中的多类（如click、mouseout等）事件,第1个参数可直接简写命名空间即可，或写成"click.namespace mouseout.namespace"全写形式
$(".unbindNamespace").click(function(){
$(".demonstrate").off('.namespace',"ul li");
})
</pre>
网友评论