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 範例，這樣可以更直接瞭解。

JavaScrpt jQuery

jQuery Click Event

See also