关于on()方法

自Jquery1.7起，on()方法是 bind()、live()、delegate() 方法的新的替代品。

on()方法带来很多便利，应用过程中推荐使用该方法，简化了Jquery代码库。

on()方法添加的事件处理程序适用于当前及未来的元素（比如动态创建的元素）。

如需移除事件处理程序，请使用 off() 方法。

如需添加只运行一次的事件然后移除，请使用 one() 方法。

方法参数

$(selector).on(event,childSelector,data,function)
//selector（必须）元素选择器（必须）
//event（必须）绑定事件，支持多个事件（空格分隔多个事件值，也可以是数组）
//childSelector（选用）子元素选择器
//data（选用）传递到函数的额外数据
//function（选用）事件发生时运行的函数

基本实例

$(document).ready(function(){
    //一般情况下on用于页面dom初始化完成进行绑定
    //支持绑定动态产生的节点
    $("p").on("click",function(){
        alert("段落被点击了。");
    });
});

组合实例

//绑定点击事件
$("p").on("click",function(){
    alert("段落被点击了。");
});

//绑定多个事件1
$("p").on("click change",function(){
    alert("段落被点击或修改。");
});

//绑定多个事件2
$("p").on(["click","change"],function(){
    alert("段落被点击或修改。");
});

//绑定子元素
$("p").on("click","span",function(){
    alert("段落的SPAN子元素被点击了。");
});

//绑定传递参数
$("p").on("click","span",{"name":123},callBack);
function callBack(e)
{
    alert("接受参数："+event.data.name);
}

小结

Jquery中的.on("click")和.click()二者在绑定静态控件时没有区别。

但是如果面对动态产生的控件，只有on()能成功的绑定到动态控件中。

$("#add").click(function(){ 
    $(".li").append('<li>动态添加元素on<button class="del">del</button></li>'); 
});

//无法绑定成功
$(".del").click(function(){ 
    $(this).parent().remove(); 
}); 

//可以绑定并触发
$(".li").on(“click“, ".del", function(){
    $(this).parent().remove(); 
})