jQuery的.on()

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

用法跟以前live有些差別,先把live改成on
  1. .on( events [, selector] [, data], handler(eventObject) )  

有一個主要的差別,live是只要直接把事件綁在元素上就可以,可是on要先找到不是動態產生的元素,像下面的,如果tr是動態產生
  1. $("#dataTable tbody tr").on("click"function(event){   
  2.     alert($(this).text());   
  3. });  
就要改寫成
  1. $("#dataTable tbody").on("click""tr"function(event){   
  2.     alert($(this).text());   
  3. });  
不然會綁不到事件

另外也可以帶參數進去。
  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,可以這樣寫:
  1. $("div.test").on({   
  2.   mouseenter: function(){   
  3.     $(this).addClass("inside");   
  4.   },   
  5.   mouseleave: function(){   
  6.     $(this).removeClass("inside");   
  7.   }   
  8. });  

如果要綁動態的元素,則這樣加
  1. $("div.test").on({      
  2.     mouseenter: function(){      
  3.         $(this).addClass("inside");      
  4.     },      
  5.     mouseleave: function(){      
  6.         $(this).removeClass("inside");      
  7.     }      
  8. }, "a");    

留言