在jquery中，给元素绑定事件，本文一共介绍三种方法，运用案例，针对最常用的on()方法，进行事件绑定操作。
事件绑定方法：
①$(element).bind()
参数：{ “事件名称1”：function( ){ } ，“事件名称2”：function（）{ }，......}
例如给类名为one的div绑定鼠标点击和鼠标滑入、鼠标滑出事件
$( "div.one").bind( { "click"：function（）{}，“mouseover”：function（）{}，“mouseout”：function(){} })；
②父级元素.delegate()
参数1：子级元素
参数2：事件名称
参数3：事件处理函数
③父级元素.on()
参数1：事件名称
参数2：子级元素
参数3：事件处理函数
示例如下：
分析：点击“添加数据”按钮，弹出“添加数据”对话框，输入课程名字和所属学院，点击“添加”按钮，将输入的课程名称和所属学院添加至表格中，同时，点击“GET”，删除“GET”所在行
具体代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 padding: 0px; 9 height: 0px; 10 } 11 12 /* 遮盖层 */ 13 .cover { 14 100%; 15 height: 100%; 16 background-color: black; 17 /* 注意：要想宽高100%覆盖，必须脱离文档流 */ 18 position: absolute; 19 top: 0px; 20 left: 0px; 21 opacity: 0.1; 22 display: none; 23 } 24 25 /* 表单层 */ 26 .form { 27 height: 294px; 28 424px; 29 background-color: white; 30 border: 1px solid lightgray; 31 margin-left: -212px; 32 margin-top: -140px; 33 display: none; 34 position: absolute; 35 left: 50%; 36 top: 50%; 37 } 38 39 /* 表单层头部 */ 40 .form .header { 41 height: 60px; 42 background-color: #F7F7F7; 43 line-height: 48px; 44 text-indent: 0.5em; 45 } 46 47 .form .header span { 48 color: #666666; 49 font-weight: bold; 50 } 51 52 .header a{ 53 position: relative; 54 left: 321px; 55 text-decoration: none; 56 color: black; 57 font-weight: 400; 58 font-size: 30px; 59 top: 4px; 60 } 61 62 /* 表单层主体 */ 63 .body { 64 height: 173px; 65 padding-top: 35px; 66 } 67 68 .body div { 69 height: 36px; 70 line-height: 36px; 71 text-indent: 10px; 72 margin-bottom: 35px; 73 } 74 75 .body div input { 76 height: 36px; 77 300px; 78 } 79 80 .add { 81 text-align: center; 82 } 83 84 #btnAdd { 85 height: 36px; 86 170px; 87 } 88 89 /* 原始层 */ 90 .original{ 91 height: 234px; 92 369px; 93 margin: 200px auto; 94 95 } 96 /* 添加数据按钮 */ 97 .original input{ 98 height: 32px; 99 112px; 100 font-weight: bold; 101 line-height: 32px; 102 font-size: 17px; 103 } 104 table{ 105 100%; 106 border-collapse: collapse; 107 } 108 thead{ 109 height: 50px; 110 background-color: #0099CC; 111 color: white; 112 } 113 tr{ 114 height: 42px; 115 line-height: 42px; 116 } 117 th,td{ 118 border: 1px solid #D0D0D0; 119 text-align: center; 120 } 121 tbody{ 122 color: #404060; 123 font-size: 10px; 124 background-color: #F0F0F0; 125 } 126 .get{ 127 color: #0050EF; 128 } 129 </style> 130 <script src="jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 131 <script type="text/javascript"> 132 $(function(){ 133 //点击添加数据,弹出表单层和遮盖层 134 $("#btnAddData").on("click",function(){ 135 $(".cover").show(); 136 $(".form").show(); 137 }); 138 //点击"×",隐藏表单层和遮盖层 139 $(".header a").on("click",function(){ 140 $(".cover").hide(); 141 $(".form").hide(); 142 }); 143 //点击"添加"按钮,给表格中添加数据 144 $("#btnAdd").on("click",function(){ 145 var tr=$("<tr></tr>"); 146 var item=[]; 147 item[0]=$(".course input").val(); 148 item[1]=$(".academy input").val(); 149 item[2]="GET"; 150 for(var i=0;i<3;i++){ 151 var td=$("<td></td>"); 152 td.text(item[i]); 153 tr.append(td); 154 if(i==2){ 155 td.addClass("get"); 156 } 157 } 158 $("tbody").append(tr); 159 }); 160 //点击"GET",删除所在行 161 $("tbody").on("click",".get",function(){ 162 $(this).parent().remove(); 163 }) 164 }); 165 </script> 166 </head> 167 <body> 168 <!-- 遮盖层 --> 169 <div class="cover"></div> 170 171 <!-- 表单层 --> 172 <div class="form"> 173 <!-- 表单层头部 --> 174 <div class="header"> 175 <span>添加数据</span> 176 <a href="javascrit:void(0)">×</a> 177 </div> 178 <!-- 表单层主体 --> 179 <div class="body"> 180 <!-- 课程名称 --> 181 <div class="course"> 182 <span>课程名字：</span><input type="text" id="" placeholder="请输入课程名称" /> 183 </div> 184 <!-- 所属学院 --> 185 <div class="academy"> 186 <span>所属学院：</span><input type="text" id="" value="传智播客-前端与移动开发学院" /> 187 </div> 188 <!-- 添加按钮 --> 189 <div class="add"> 190 <input type="button" id="btnAdd" value="添加" /> 191 </div> 192 </div> 193 </div> 194 195 <!-- 原始层 --> 196 <div class="original"> 197 <input type="button" id="btnAddData" value="添加数据" /> 198 199 <table cellspacing="0" cellpadding="0"> 200 <!-- 表格头部 --> 201 <thead> 202 <tr> 203 <th>课程名称</th> 204 <th>所属学院</th> 205 <th>已学会</th> 206 </tr> 207 </thead> 208 <!-- 表格主体 --> 209 <tbody> 210 <tr> 211 <td>JavaScript</td> 212 <td>传智播客-前端与移动开发学院</td> 213 <td class="get">GET</td> 214 </tr> 215 216 <tr> 217 <td>css</td> 218 <td>传智播客-前端与移动开发学院</td> 219 <td class="get">GET</td> 220 </tr> 221 222 <tr> 223 <td>html</td> 224 <td>传智播客-前端与移动开发学院</td> 225 <td class="get">GET</td> 226 </tr> 227 228 <tr> 229 <td>jQuery</td> 230 <td>传智播客-前端与移动开发学院</td> 231 <td class="get">GET</td> 232 </tr> 233 234 </tbody> 235 </table> 236 </div> 237 </body> 238 </html> 239 240 241
注意：
网页结构布局
在给”GET“绑定点击事件，注意从父级元素开始给子级元素绑定事件，否则点击事件会出现bug