jquery中on綁定事件

以前項目中動態建立的標籤元素  在綁定事件的時候  都是無效  不管如何都不能觸發

eg：在頁面加載完成以後   再由腳本動態建立的<div>元素  在綁定事件的時候 例如click事件 

$("div").click(function(alert("aaa")){});

那麼動態建立的元素是觸發不了這個事件的

這是就要用到on來綁定事件了。

可是在W3C中並無on事件  只有live，delegate 這是因爲這裏的更新很不及時  ，建議去http://www.runoob.com（菜鳥教程）學習，可是我的感受 菜鳥上的小錯誤比較多。

on的定義和用法：

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

注意：使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。可是on事件是1.7以後新增長的  若是引用的是1.9以前的版本  還能夠用live和delegate來綁定事件.

live事件在1.9以後被移除了。

本身嘗試了一下   使用1.7以後的 給將來元素添加事件 使用on並不能觸發。（放在下一篇進行解答）

提示：如需移除事件處理程序，請使用 off() 方法。全部off也是1.9以後出現的。

提示：如需添加只運行一次的事件而後移除，請使用 one() 方法。

另外附加下：click，bind（「click」），live，delegate的區別：

一、click()與bind()

　　1).click()

　　　　在jqeury事件處理API中，bind()是其API基礎。click(),mouseover(),mousermove等來處理事件，真正起做用的是bind()。而這些方法都只是輔助做用（別名函數），簡化使用。他們都只有一個參數(觸發事件時執行的回調函數).

　　2).bind()

　　　　bind()能更好的控制事件處理函數中的處理過程，且它能夠一次綁定多個事件（事件名做爲第一個參數，多個事件用空格分開，eg：bind('click contains',function(){})  鼠標左右點擊事件 ）

 

全部實用bind()或者click(),mouserover()綁定的事件均可以使用unbind()方法解除綁定

 

二、live()

　　與bind()做用基本同樣。

　　最重要區別：live()能夠將事件綁定到當前和未來的元素(eg:爲id=zy元素綁定點擊事件，而當你用js動態生成一個節點並插入到dom文檔結構中時，若是你是用bind()綁定的，怎麼新插入的節點將不會有該bind綁定事件。而live()則能夠);

　　缺點: 沒法用於鏈式結構。

　　　　　　eg:  $('.class').live('click',function(){  })     正確寫法

　　　　　　　　 $('.class').find('span').live('click',function(){  })   錯誤寫法  無效

　　live()綁定的事件可用 die()方法解除綁定。

三、delegate()

　　與live()做用基本同樣，可是解決live缺點。它經過將選擇器內的上下文做爲第一個參數來解決live問題（也就是delegate得第一個參數你能夠看成是一個選擇元素所用）。

　　eg. $('.class').delegate('span','mouseover',fucntion(){  })    爲class爲class的元素下的全部span標籤綁定mouseover事件。

　　經過delegate()綁定的事件可經過undelegate()方法解除處理函數的綁定。

 

PS：bind，delegate，live均可以綁定多個事件，多個事件效果同樣：

$("div").bind("click mouseout", function() {
     $("#aa").after("<span>aaa </sapn>")
 });

觸發不一樣效果：

$("div").bind({
       click:function(){alert(1)},
       mouseout:function(){alert(2)}
});