jquery on()方法是官方推荐的绑定事件的一个方法。
复制代码 代码如下:
$(selector).on(event,childselector,data,function,map)
由此扩展开来的几个以前常见的方法有.
复制代码 代码如下:
bind()$(p).bind(click,function(){
alert(the paragraph was clicked.);
});
$(p).on(click,function(){
alert(the paragraph was clicked.);
});
delegate()
$(#div1).on(click,p,function(){
$(this).css(background-color,pink);
});
$(#div2).delegate(p,click,function(){
$(this).css(background-color,pink);
});
live()
$(#div1).on(click,function(){
$(this).css(background-color,pink);
});
$(#div2).live(click,function(){
$(this).css(background-color,pink);
});
以上三种方法在jquery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。
复制代码 代码如下:
$(document).ready(function(){
$(p).on(click,function(){
$(this).css(background-color,pink);
});
$(button).click(function(){
$(p).off(click);
});
});
tip:如果你的事件只需要一次的操作，可以使用one()这个方法
复制代码 代码如下:
$(document).ready(function(){
$(p).one(click,function(){
$(this).animate({fontsize:+=6px});
});
});
trigger()绑定
复制代码 代码如下:
$(selector).trigger(event,eventobj,param1,param2,...)
$(document).ready(function(){
$(input).select(function(){
$(input).after( text marked!);
});
$(button).click(function(){
$(input).trigger(select);
});
});
多个事件绑定同一个函数
复制代码 代码如下:
$(document).ready(function(){
  $(p).on(mouseover mouseout,function(){
    $(p).toggleclass(intro);
  });
});
多个事件绑定不同函数
复制代码 代码如下:
$(document).ready(function(){
  $(p).on({
    mouseover:function(){$(body).css(background-color,lightgray);}, 
    mouseout:function(){$(body).css(background-color,lightblue);},
    click:function(){$(body).css(background-color,yellow);} 
  });
});
绑定自定义事件
复制代码 代码如下:
$(document).ready(function(){
  $(p).on(myownevent, function(event, showname){
    $(this).text(showname + ! what a beautiful name!).show();
  });
  $(button).click(function(){
    $(p).trigger(myownevent,[anja]);
  });
});
传递数据到函数
复制代码 代码如下:
function handlername(event)
{
  alert(event.data.msg);
}$(document).ready(function(){
  $(p).on(click, {msg: you just clicked me!}, handlername)
});
适用于未创建的元素
复制代码 代码如下:
$(document).ready(function(){
  $(div).on(click,p,function(){
    $(this).slidetoggle();
  });
  $(button).click(function(){
    $(this is a new paragraph.
).insertafter(button);
  });
});