关于jquery多个元素绑定同一个事件的信息-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

关于jquery多个元素绑定同一个事件的信息

jquery中click事件的累加绑定,点击一次,执行多次

最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求。完成后看效果,第一次点击没有问题。再一次点击后发现发送了两次请求,后面再点击发现请求的数量越来越多。这时我初步判断可能是元素有多个或是多次调用了方法,但找了一遍,发现只为一个元素绑定了事件,且只调用了一次。后来通过查资料才知道是点击事件被累加绑定了!那到底什么是累加绑定呢?什么时候会发生累加绑定?累加绑定后该如何解决呢?下面我就通过这三个问题来说一下。

目前创新互联已为1000+的企业提供了网站建设、域名、雅安服务器托管、网站托管维护、企业网站设计、汉中网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推。

如何解决累加绑定:第一种方法是元素点击后删除,然后再动态创建一个元素,再添加点击事件。显然这个方式很麻烦。

第二中方法是使用jquery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次。

第三种方法是在每次绑定点击事件前先解除之前的事件绑定,再为元素绑定事件,类似于先清空,在做操作一样。但你使用bind()方法绑定时,可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件,因为bind()方法已经不被推荐,那么那么就用off()方法解除事件绑定。

jquery,怎么给多个元素绑定同一个事件问题,传变量方式

给你举个简单的例子用jq,我不知道你要获取的是什么值,比如我要获取的是他们的id就是.attr("id")

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title/title

script src="imgbox/js/jquery.min.js" type="text/javascript"/script

script

var str = "";

$(document).ready(function () {

$(".a").click(function () {

$(".a").each(function () {

str += $(this).attr("id") + ",";

});

var reg = /,$/gi;

str = str.replace(reg, "");

alert(str);

});

})

/script

/head

body

div

a class="a" id="a1"c11111111/aa class="a" id="a2"c22222222/a

/div

/body

/html

jquery绑定点击事件的方法

jQuery绑定点击事件可以使用其绑定事件函数

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

1、bind()    

简要描述

bind()向匹配元素添加一个或多个事件处理器。

使用方式

$(selector).bind(event,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

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

多事件处理:

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

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

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独

绑定函数; 

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

2、live()   

简要描述

live() 向当前或未来的匹配元素添加一个或多个事件处理器;

使用方式

$(selector).live(event,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).live("click",data,function);

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

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

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

3、delegate()

简要描述

delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(selector).delegate(childSelector,event,data,function)

childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).delegate(childselector,"click",data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);

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

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.4.2及其以上版本;

4、on()

简要描述

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(selector).on(event,childselector,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).on("click",childselector,data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector); 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 

childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

四种方式的异同和优缺点

相同点:

1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些

4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

总结

如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法

jquery,怎么给多个元素绑定同一个事件,变量

用逗号隔开即可,如绑定类.close和类.cancel两个元素的点击事件,其代码如下:

$(".close, .cancel").click(function(){

alert("你好");

});

这样就将两个元素绑定在同一个事件上了

怎么给jquery添加的元素添加事件

有2种方法:

最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,

第二种方式是通过给类名绑定一个事件。

p id="pLabel"新加一条/p

ul id="ulLabel"

li class="liLabel"aaa1/li

li class="liLabel"aaa2/li

li class="liLabel"aaa3/li

/ul

script type="text/javascript"

$("#pLabel").click(function(){

$("#ulLabel").append('li class="liLabel"aaaQ/li'); //动态像ul的末尾追加一个新元素

});

/script

方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

$('.liLabel').live('click', function(){

alert('OK');

});

方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#ulLabel").on('click','.liLabel',function(){

alert('OK')

});

或者:

$("body").on('click','.liLabel',function(){

alert('OK')

});

注意绑定的事件,需要绑定在父元素。

jquery 多个button绑定同一个事件

你这里id怎么取的一样?不过影响不大,直接$("button")就可以定位到所有的button元素,得到的是一个list,你循环

绑定一下click()就好了!

具体你这样

var list=$("button");

var choose={};

choose.click=function(i){

$(list[i]).click(function(){//需要执行的操作})

document.ready(function(){

for(var i=0;i=list.length;i++)

choose.click(i);

})

这样就可以了!


网页标题:关于jquery多个元素绑定同一个事件的信息
网站URL:http://kswsj.cn/article/dsgjpid.html

其他资讯