jQuery.on() 函數詳解

on()函數用於爲指定元素的一個或多個事件綁定事件處理函數。 
從jQuery 1.7開始，on()函數提供了綁定事件處理程序所需的所有功能，用於統一取代以前的bind()、 delegate()、 live()等事件函數。 
on()支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委託綁定。在事件委託綁定模式下，即使是執行on()函數之後新添加的元素，只要它符合條件，綁定的事件處理函數也對其有效。

要刪除通過on()綁定的事件，請使用off()函數。

請參考下面這段初始HTML代碼：

<div id="main">
    <p>測試代碼</p>
    <p>測試代碼</p>
    <em>測試</em>
</div>
<p>測試代碼</p>

我們爲div中的所有p元素綁定點擊事件： 
此種寫法有兩個特點（1.目標元素可以支持祖輩元素上委託綁定 2.執行on()函數之後新添加的元素符合條件）

$("p").on("click", function(event){
    // 這裏的this指向觸發點擊事件的p元素(Element)
    alert( $(this).text() );
});

selector參數：一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數爲null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達當前元素即可)。

on() 如果不傳selector參數，那麼就是直接綁定，不是事件委託機制；如果加了selector參數，那就是事件委託，之後新添加的元素，只要符合條件，綁定事件依然有效。 
比如要對頁面中所有的p標籤綁定click事件，應該這樣寫： 
$(document.body).on("click", "p", function(){ }); 
這樣，新添加的p元素也會綁定click事件。 
深入點說，這個click事件實際上是綁定到 document.body 上面的，而不是每個p標籤上，不過它的所有子孫節點發出了click事件，都會冒泡傳遞到 document.body，並觸發其綁定的click事件。jQuery再檢測這個click事件在冒泡的過程中是否”經過”了”p”標籤，如果是，就執行我們指定的回調函數。