在jquery中，給元素綁定事件，本文一共介紹三種方法，運用案例，針對最常用的on()方法，進行事件綁定操作。 事件綁定方法： ①$(element).bind() 參數：{ “事件名稱1”：function( ){ } ，“事件名稱2”：function（）{ }，......} 例如給類名為on ...
在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 width: 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 width: 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 width: 300px; 78 } 79 80 .add { 81 text-align: center; 82 } 83 84 #btnAdd { 85 height: 36px; 86 width: 170px; 87 } 88 89 /* 原始層 */ 90 .original{ 91 height: 234px; 92 width: 369px; 93 margin: 200px auto; 94 95 } 96 /* 添加數據按鈕 */ 97 .original input{ 98 height: 32px; 99 width: 112px; 100 font-weight: bold; 101 line-height: 32px; 102 font-size: 17px; 103 } 104 table{ 105 width: 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
