jQuery的.on()

在以前jQuery事件綁定主要分為bind跟live，兩個寫起來差不多，差別如果頁面裡面的DOM是動態產生的話，用bind就會抓不到那些動態產生的DOM，所以我們如果有用到ajax去動態產生DOM的話，就會使用live，不過live因為效能差還有一些其他的問題，所以官網也建議我們不要使用live，而在1.7之後有了.on()可以使用，如果之前有用live，不妨盡量改成.on()吧。

用法跟以前live有些差別，先把live改成on

view plaincopy to clipboardprint?

1. .on( events [, selector] [, data], handler(eventObject) )  

有一個主要的差別，live是只要直接把事件綁在元素上就可以，可是on要先找到不是動態產生的元素，像下面的，如果tr是動態產生

view plaincopy to clipboardprint?

1. $("#dataTable tbody tr").on("click", function(event){   
2.     alert($(this).text());   
3. });  

就要改寫成

view plaincopy to clipboardprint?

1. $("#dataTable tbody").on("click", "tr", function(event){   
2.     alert($(this).text());   
3. });  

不然會綁不到事件

另外也可以帶參數進去。

view plaincopy to clipboardprint?

1. function greet(event) { alert("Hello "+event.data.name); }   
2. $("button").on("click", { name: "Karl" }, greet);   
3. $("button").on("click", { name: "Addy" }, greet);  

如果想要用on在不同事件下執行不一樣的效果，比方在動態產生的DOM上，我們還希望他可以在滑入滑出時動態切換class，可以這樣寫：

view plaincopy to clipboardprint?

1. $("div.test").on({   
2.   mouseenter: function(){   
3.     $(this).addClass("inside");   
4.   },   
5.   mouseleave: function(){   
6.     $(this).removeClass("inside");   
7.   }   
8. });  

如果要綁動態的元素，則這樣加

view plaincopy to clipboardprint

1. $("div.test").on({      
2.     mouseenter: function(){      
3.         $(this).addClass("inside");      
4.     },      
5.     mouseleave: function(){      
6.         $(this).removeClass("inside");      
7.     }      
8. }, "a");    

反應：