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.9之后新增加的  如果引用的是1.9之前的版本  还是用live和delegate来绑定事件.

自己尝试了一下   使用1.9之后的 给未来元素添加事件 使用on并不能触发  以后用到了在测试吧   使用1.9之前的 live可以触发。

提示:如需移除事件处理程序,请使用 off() 方法。所有off也是1.9之后出现的。

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

另外附加下:click,bind(“click”),live,delegate的区别:

1、click()与bind()

  1).click()

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

  2).bind()

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

所有实用bind()或者click(),mouserover()绑定的事件都可以使用unbind()方法解除绑定

2、live()

  与bind()作用基本一样。

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

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

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

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

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

3、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)}
});
时间: 2024-10-06 00:30:51

jquery中on绑定事件的相关文章

jquery中四个事件绑定方式(bind,live,delegate,on)

bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事件处理:例如 $(selector).bind("click",data,function); 多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout"

网站开发div在Jquery中的鼠标事件失去焦点

网站div在Jquery中的鼠标事件失去焦点,今天在做网站开发的时候遇到了个问题,就是我在用Jquery做导航的时候,用到了Jquery的鼠标事件mouseout,但问题出来了,我有两个div,A的div包含了B的div,本来我是想当鼠标移出A的div的时候隐藏div,可是当我的鼠标移到B的div在移出的时候也会触发jquery的隐藏事件,这让人很头痛. 在网上搜了下,找到了解决的法子,就是直接把mouseout换成了mouseleave就可以了,具体的问题请大家参考Jquery的开发文档吧

防止异步刷掉jquery加载绑定事件

<script type="text/javascript" language="javascript">        var prm = Sys.WebForms.PageRequestManager.getInstance();        prm.add_endRequest(function () {            //在这下面写你的js或jquery代码,防止异步刷掉jquery加载绑定事件            $(functio

JQuery Mobile - 为什么绑定事件后会被多次执行?

JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现功能?在执行正常点击事件之前,解绑事件!! JQuery对事件的绑定主要有两种方式,分别是on和bind,这两种方式分别对应的解绑方式为off和unbind,知道这些,我们就可以写代码了: 一,用on和off // off和on绑定"tap"方法 $("#changePasswo

jquery appaend元素中id绑定事件失效问题

1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="title"></div>中,通过append添加一个id="demo"的按钮,常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写

jquery中的DOM事件绑定与解绑

在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑定与事件解绑. 1 $(document).on('click.endEdit',function (e) { 2 if(!$(e.target).hasClass('datagrid-cell')&&e.target.tagName!="TD"){ //事件发生后的判断条

jquery中bind()绑定多个事件

bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),data是可选的,规定传递到函数的额外数据,function为事件执行的函数. 绑定单个事件比较简单 $("button").bind("click",function(){ //事件处理内容... }); 绑定多个事件时,参数在一个大括号里面,event可以加双引号也可以

jquery使用on绑定事件的高级方法

$(doucment).on("click",".main",function(){ } //当页面中需要对发送ajax成功后生成的元素绑定事件时:就需要用到jquery的on方法来绑定事件:因为用这样的事件代理的方法:可以吧事件对象的事件代理到document上:这样就可以通过document来找到你要绑定的元素的对象上:

浅谈jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S