关于 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(); 
})
​