jquery中on绑定事件

以前项目中动态建立的标签元素  在绑定事件的时候  都是无效  不管如何都不能触发

eg：在页面加载完成以后   再由脚本动态建立的<div>元素  在绑定事件的时候 例如click事件 

$("div").click(function(alert("aaa")){});

那么动态建立的元素是触发不了这个事件的

这是就要用到on来绑定事件了。

可是在W3C中并无on事件  只有live，delegate 这是因为这里的更新很不及时  ，建议去http://www.runoob.com（菜鸟教程）学习，可是我的感受 菜鸟上的小错误比较多。

on的定义和用法：

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来不少便利，咱们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及将来的元素（好比由脚本建立的新元素）。可是on事件是1.7以后新增长的  若是引用的是1.9以前的版本  还能够用live和delegate来绑定事件.

live事件在1.9以后被移除了。

本身尝试了一下   使用1.7以后的 给将来元素添加事件 使用on并不能触发。（放在下一篇进行解答）

提示：如需移除事件处理程序，请使用 off() 方法。全部off也是1.9以后出现的。

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

另外附加下：click，bind（“click”），live，delegate的区别：

一、click()与bind()

　　1).click()

　　　　在jqeury事件处理API中，bind()是其API基础。click(),mouseover(),mousermove等来处理事件，真正起做用的是bind()。而这些方法都只是辅助做用（别名函数），简化使用。他们都只有一个参数(触发事件时执行的回调函数).

　　2).bind()

　　　　bind()能更好的控制事件处理函数中的处理过程，且它能够一次绑定多个事件（事件名做为第一个参数，多个事件用空格分开，eg：bind('click contains',function(){})  鼠标左右点击事件 ）

 

全部实用bind()或者click(),mouserover()绑定的事件均可以使用unbind()方法解除绑定

 

二、live()

　　与bind()做用基本同样。

　　最重要区别：live()能够将事件绑定到当前和未来的元素(eg:为id=zy元素绑定点击事件，而当你用js动态生成一个节点并插入到dom文档结构中时，若是你是用bind()绑定的，怎么新插入的节点将不会有该bind绑定事件。而live()则能够);

　　缺点: 没法用于链式结构。

　　　　　　eg:  $('.class').live('click',function(){  })     正确写法

　　　　　　　　 $('.class').find('span').live('click',function(){  })   错误写法  无效

　　live()绑定的事件可用 die()方法解除绑定。

三、delegate()

　　与live()做用基本同样，可是解决live缺点。它经过将选择器内的上下文做为第一个参数来解决live问题（也就是delegate得第一个参数你能够看成是一个选择元素所用）。

　　eg. $('.class').delegate('span','mouseover',fucntion(){  })    为class为class的元素下的全部span标签绑定mouseover事件。

　　经过delegate()绑定的事件可经过undelegate()方法解除处理函数的绑定。

 

PS：bind，delegate，live均可以绑定多个事件，多个事件效果同样：

$("div").bind("click mouseout", function() {
     $("#aa").after("<span>aaa </sapn>")
 });

触发不一样效果：

$("div").bind({
       click:function(){alert(1)},
       mouseout:function(){alert(2)}
});