大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jqueryon捕获的简单介绍

jquery on 的用法

.on()方法事件处理程序到当前选定的jQuery对象中的元素。

成都创新互联专业为企业提供朝阳网站建设、朝阳做网站、朝阳网站设计、朝阳网站制作等企业网站建设、网页设计与制作、朝阳企业网站模板建站服务,十多年朝阳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

.on( events [, selector ] [, data ], handler(eventObject) )

events:类型: String

一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector:类型: String

一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。

data:类型: Anything

当一个事件被触发时,要传递给事件处理函数的event.data。

handler(eventObject):类型: Function()

事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false。

jQuery on()方法绑定动态元素的点击事件实例代码浅析

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。

jQuery

使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。

比如页面上有下边两个元素:

input

type="button"

name="addbtn"

value="按钮添加"

/

div

id="test"

/div

使用下边的jQuery代码大家可以对比看看区别:

$(function

()

{

var

a

=

1,

$_div

=

$('#test');

$('input[name=addbtn]').on('click',

function

()

{

$_div.append('input

type="button"

name="test'

+

a

+

'"

value="按钮'

+

a

+

'"/');

a++;

});

//偶数项点击事件

$_div.on('click',

'input[name^=test]:even',

function

()

{

alert('我是有效的on方法,你能看见我吗:'

+

this.value);

});

//奇数项绑定的点击事件

发现点击无效,而是用live方法却能够支持

$('input[name^=test]:odd').on('click',

function

()

{

alert('我是无效的on方法,你不能看见我');

});

//奇数项绑定的点击事件

发现点击无效,而是用live方法却能够支持

$('input[name^=test]:odd').live('click',

function

()

{

alert('我是live方法,你能看见我吗:'

+

this.value);

});

});

以上所述是小编给大家介绍的jQuery

on()方法绑定动态元素的点击事件的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

jQuery怎么获取动态生成的元素,on方法的话,父元素也是动态生成的,怎么写?

on方法可以对新生成的元素绑定事件。

on方法第一个参数是触发事件的名称;第二个是侦听元素,可以是现在的,也可以是动态生成的;第三个就是具体的实际处理函数。

jquery绑定事件on()方法

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的替换掉bind()

在 1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到 live()一样的效果。

1、live()写法

2、on()写法

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

delegate() 是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

1、delegate()的写法

2、on()写法

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

JQuery的on()监听方法使用

jquery.on()超级方法

归纳

在jquery的on方法中实现事件委托就更简单了,on方法可以接受三个参数:

第一个参数是事件名,可以只绑定一个事件,如on('click'),也可以绑定多个事件,如on('click dbclick mouseover')等

第二个参数是可选参数,接受一个selector,当事件触发元素符合selector时,会调用事件处理函数

注:此处用到 li:even 选择器,后面有注解

第三个参数是自定义事件处理的回调函数。

1.jQuery :even 选择器

选取每个带有偶数 index 值的元素(比如 2、4、6)

index 值从 0 开始,所有第一个元素是偶数 (0)

2.jQuery :odd 选择器

选取每个带有奇数 index 值的元素(比如 1、3、5)


分享标题:jqueryon捕获的简单介绍
网页链接:http://dzwzjz.com/article/dsgdgcj.html
在线咨询
服务热线
服务热线:028-86922220
TOP