jquery on，方法绑定多个选择器,多个事件
jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！
旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素。
但自jq1.7版本开始，官方已明文表示不再推荐使用使用.live()方法，官方解释为：live()调用过程首先将事件方法绑定到了Document，然后，查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法，适用脚本创建的新元素。
jq1.8开始，官方又再次申明：如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法。
本文将详细介绍jq1.8中.on()用法，相关用法源码如下：
1 <!--实例效果文字描述，可删-->
2 <div class="demonstrate">
3 <div class="description">
4 <h3>jq新版事件绑定.on()、解绑事件off()用法详解</h3>
5 <p>年月日 星期 时分秒</p>
6 </div>
7 <div >
8 <ul>
9 <li>1 点我有3弹窗</li>
10 <li>2 点我有3弹窗</li>
11 <li>3 点我有3弹窗</li>
12 <li>4 点我有3弹窗</li>
13 </ul>
14 <div >
15 <p>
16 <a href="javascript:;" class="bind">js->添加一个li,添加的li也能响应之前绑定的事件！</a>
17 </p>
18 <p>
19 <a href="javascript:;" class="unbindAllclick">解绑li 所有click事件</a>
20 </p>
21 <p>
22 <a href="javascript:;" class="unbindSpecifyclick">解绑li 指定事件函数的click事件2</a>
23 </p>
24 <p>
25 <a href="javascript:;" class="unbindNamespace">解绑li 同一命名空间中的click事件2、mouseout事件</a>
26 </p>
27 </div>
28 </div>
29 </div>
30 <script type="text/javascript">
31 // js创建新元素
32 $(".bind").on("click",function(){
33 $("ul").append("<li/>");
34 var temp=$("ul li").last();
35 temp.html($("ul li").length +"响应点击事件？");
36 });
37 // 旧版写法: 事件不能适用脚本创建的新元素
38 // $("ul li").bind("click",function(){
39 // alert("不响应事件!");
40 // })
41 // 旧版事件.live()：适用脚本创建的新元素写法,live()调用过程如下：我们首先将click方法绑定到了Document，然后，查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费
42 // $("ul li").live("click",function(){
43 // alert("响应事件!");
44 // })
45 // 新版写法一：单纯将bind改成on，事件不能适用脚本创建的新元素
46 // $("ul li").on("click",function(){
47 // alert("不响应事件!");
48 // })
49 // 新版写法二：将live改成Delegate，适用脚本创建的新元素
50 // $(".demonstrate").delegate("ul li","click",function(){
51 // alert("响应事件!");
52 // })
53 // 新版写法三：适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
54 // $(ele).on() ele 为匹配元素的父元素，可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说，比较浪费，推荐定成匹配元素就近的父元素！！
55 //如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法
56 $(".demonstrate").on("click","ul li",function(e){
57 alert("响应"+e.type+"事件1!");
58 });
59 $(".demonstrate").on("click.namespace","ul li",eventFunc=function(e){
60 alert("响应"+e.type+"事件2!");
61 });
62 $(".demonstrate").on("mouseout.namespace","ul li",function(e){
63 alert("响应"+e.type+"事件!");
64 });
65 // 新版多事件同时绑定写法
66 //$(".demonstrate").on({
67 // mouseover:function(){
68 // $(this).addClass("over");
69 // },
70 // mouseout:function(){
71 // $(this).removeClass("over");
72 // }
73 //},"ul li")
74 //
75 //$(".demonstrate").on("mouseover mouseout","ul li",function(e){
76 // if(e.type=="mouseover"){
77 // $(this).addClass("over");
78 // }else{
79 // $(this).removeClass("over");
80 // }
81 //})
82 // 新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件
83 // 解绑所有点击事件
84 $(".unbindAllclick").click(function(){
85 $(".demonstrate").off('click',"ul li");
86 })
87 // 事件函数：可解绑指定事件函数的同类事件,第3个参数：事件函数 (不需要引号)
88 $(".unbindSpecifyclick").click(function(){
89 $(".demonstrate").off('click',"ul li",eventFunc);
90 })
91 // 命名空间：解绑同一命名空间中的多类（如click、mouseout等）事件,第1个参数可直接简写命名空间即可，或写成"click.namespace mouseout.namespace"全写形式
92 $(".unbindNamespace").click(function(){
93 $(".demonstrate").off('.namespace',"ul li");
94 })
95 </script>转自：http://www.phpvar.com/archives/2529.html