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()函数之后新添加的元素符合条件）

$("div").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

为所有p元素绑定click事件处理程序
此种写法有两个特点（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”标签，如果是，就执行我们指定的回调函数。