自jQuery1.7以後，建議用on()代替bind(),執行為備選元素新增一個或多個處理程式，並規定當函式執行時發生。

1 語法

on()和bind()的語法分別如下：

// on的語法
$(selector).on(event ,data, function)
// bind的語法
$(selector).bind(event,data,function)

引數	描述
*event	必需。規定要從被選元素新增的一個或多個事件或名稱空間。由空格分隔多個事件值，也可以是陣列。必須是有效的事件。
*childSelector*	可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。
*data*	可選。規定傳遞到函式的額外資料。
*function*	可選。規定當事件發生時執行的函式。

從這裡可以看出，on()與bind()的區別在於，on()能夠新增到指定的子元素處理程式。看來，on()的內心有著它的繼承者，而bind()的內心只有自己。

2 例子

下面，一個例子，點選button，切換p的顯示和隱藏（由於例子簡單，就不顯示頁面效果了）。HTML程式碼如下：

1 <body>
2     <div style="background-color:red">
3         <p>這是一個段落。</p 
>
4         <button>請點選這裡</button>
5     </div>
6 </body>

使用bind()方法jQuery代替如下：

1 $(document).ready(function(){
2   $("button").bind("click",function(){
3     $("p").slideToggle();
4   });
5 });

使用on()方法代替bind()程式碼如下：

1 $(document).ready(function () {
2     $("button").on("click", function 
 () {
3         $("p").slideToggle();
4     });
5 });

我們注意到，on可以新增指定子元素的處理程式。因此，jQuery程式碼也可以如下表示：

$(document).ready(function () {
    $("body").on("click", "button", function () {
        $("p").slideToggle();
    });
});

完結，✿✿ヽ(°▽°)ノ✿。