jQuery on()方法綁定動態元素的點擊事件，jqueryon

jQuery on()方法綁定動態元素的點擊事件，jqueryon

之前就一直受這個問題的困擾，在jQuery1.7版本之後添加了on方法，之前就瞭解過，其優越性高於live(),bind(),delegate()等方法，在此之前項目中想用這個來測試結果發現，居然動態產生的標籤點擊了沒反應，而live方法卻能夠支援，於是乎到處查資料，問網友，結果找了好久在一篇文章中終於找到了答案。。。

 

jQuery 使用on綁定動態產生的元素時，不能直接用該對象操作，而是選擇其非動態產生的父節點然後再找到本身才能達到效果。大家看看源碼就知道了。產生的按鈕基數項on方法點擊無效live方法有效。UI前端架構最新力作！有獎試讀！

比如頁面上有下邊兩個元素：

.代碼  

1. <input type="button" name="addbtn" value="按鈕添加" />  
2. <div id="test"></div>  

 使用下邊的jQuery代碼大家可以對比看看區別：

.代碼  

1. $(function () {  
2.     var a = 1,  
3.     $_div = $('#test');  
4.     $('input[name=addbtn]').on('click', function () {  
5.         $_div.append('<input type="button" name="test' + a + '" value="按鈕' + a + '"/>');  
6.         a++;  
7.     });  
8.   
9.     //偶數項點擊事件  
10.     $_div.on('click', 'input[name^=test]:even', function () {     
11.         alert('我是有效on方法,你能看見我嗎：' + this.value);  
12.     });  
13.   
14.     //奇數項綁定的點擊事件  發現點擊無效，而是用live方法卻能夠支援  
15.     $('input[name^=test]:odd').on('click', function () {     
16.         alert('我是無效的on方法,你不能看見我');  
17.     });  
18.   
19.     //奇數項綁定的點擊事件  發現點擊無效，而是用live方法卻能夠支援  
20.     $('input[name^=test]:odd').live('click', function () {  
21.         alert('我是live方法,你能看見我嗎：' + this.value);  
22.     });  
23. });  

 代碼簡單，就不放示範頁了，如果有什麼不明白的，可以留言。UI前端架構最新力作！有獎試讀！

jquery中的on方法可以否為ajax新增的元素繫結事件？

可以
.bind 的方法是舊有的
.on 是比較事件導向的新方法，其實原理就是把 bind 的事件改成物件名稱而已
jQuery 新版本 1.7 後來才有這功能
 
jquery添加的html元素按鈕為何不執行類樣式綁定的click事件

你在添加更多一行的時候所產生的 input 和 button 都是動態產生的，所以不能使用 click，要使用 live (jquery 1.7.2 之後的版本不建議使用 live) 或 on

把
$(".submitBtn").click(function(){
改為
$(".submitBtn").live('click', function(){
或者
$(".submitBtn").on('click', function(){

記住如果元素在頁面初始化的時候不存在，而是之後通過動態產生在頁面中的，要對這些元素進行操作，例如 click, blur, keyup, change....，都要使用 on

.on('click', function
.on('blur', function
.on('keyup', function
....