jQuery 1.7 透過 on 來綁定事件

既上一篇作者寫了 Javascript 前端工具 Backbone.js Framework 初學介紹,這次來將程式改寫成 jQuery 寫法,藉這個機會來介紹 jQuery 新功能 on API,底下來看看 jQuery event handle 的演進
//在 jQuery 1.3 以上版本
$(selector).live(events, data, handler);
//在 jQuery 1.4.3 以上版本 
$(document).delegate(selector, events, data, handler);
//在 jQuery 1.7 以上版本
$(document).on(events, selector, data, handler);
上面三種寫法都可以綁定網頁上全部元件,如果只是單純只是用 click bind event 的話,那只要新增的元件就無法作用,講得有點抽象,底下直接看個例子: html 程式碼:

jQuery Click Event

 

  • I am old item.  
  • I am old item.  
  • I am old item.  
  • I am old item.  
jQuery Click 事件

上面例子,大家可以發現只要是透過 button 新增加的 li element 都不可以被刪除,原因就是在 .delete 是 bind 在 click 事件。這時候就要用 jQuery.on API 來重新實做,其實很簡單,只要將 click 改成 on 就完成了,請取代底下程式碼。
    
$(".delete").click(function(){
    $(this).parent().remove();
});
換成
    
$(document).on('click', '.delete', function(event){
    $(this).parent().remove();
});
直接看 Demo 範例,這樣可以更直接瞭解。