on(), live(), bind()的用法与区别

$("").bind(event,data,function)
$("").live(event,data,function)//jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替
$("").on(event,childselector,data,function)//jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；

event：必需；添加到元素的一个或多个事件，例如 click等；

                              单事件处理：例如 $("").bind("click",data,function);

　　　　　　　  多事件处理：1.利用空格分隔多事件，例如 $("").bind("click dbclick mouseout",data,function);

                                                      2.利用大括号灵活定义多事件，例如 $("").bind({event1:function, event2:function, ...})

data：选择项; 当一个事件被触发时要传递event.data给事件处理函数。

function：必需；该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

用法：

 demo1:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 $(function () {
  $('ul li').on('click',function(){
   alert($(this).text())
  }); 
 })

demo2:

这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力

$(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 
 })

demo3:

换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件

 $(function () {
  $('ul').on('click','li',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 })