jquery中click事件的累加綁定，點(diǎn)擊一次，執(zhí)行多次

最近做項(xiàng)目為一個添加按鈕綁定點(diǎn)擊事件，很簡單的一個事情，于是我按照通常做法找到元素，使用jquery的on()方法為元素綁定了點(diǎn)擊事件，點(diǎn)擊同時(shí)發(fā)送請求。完成后看效果，第一次點(diǎn)擊沒有問題。再一次點(diǎn)擊后發(fā)現(xiàn)發(fā)送了兩次請求，后面再點(diǎn)擊發(fā)現(xiàn)請求的數(shù)量越來越多。這時(shí)我初步判斷可能是元素有多個或是多次調(diào)用了方法，但找了一遍，發(fā)現(xiàn)只為一個元素綁定了事件，且只調(diào)用了一次。后來通過查資料才知道是點(diǎn)擊事件被累加綁定了！那到底什么是累加綁定呢？什么時(shí)候會發(fā)生累加綁定？累加綁定后該如何解決呢？下面我就通過這三個問題來說一下。

目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、漢中網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

在頁面中為一個元素綁定事件，事件執(zhí)行后頁面未刷新且元素還在，然后你再次點(diǎn)擊，元素又被綁定個一次點(diǎn)擊事件，這樣第二次點(diǎn)擊就會執(zhí)行兩次，以此類推。

如何解決累加綁定：第一種方法是元素點(diǎn)擊后刪除，然后再動態(tài)創(chuàng)建一個元素，再添加點(diǎn)擊事件。顯然這個方式很麻煩。

第二中方法是使用jquery的one()方法，為元素綁定一個一次性的事件處理函數(shù)，這個事件處理函數(shù)只會被執(zhí)行一次。

第三種方法是在每次綁定點(diǎn)擊事件前先解除之前的事件綁定，再為元素綁定事件，類似于先清空，在做操作一樣。但你使用bind()方法綁定時(shí)，可以用unbind()方法解除綁定。通常我們跟愿意用on()方法綁定事件，因?yàn)閎ind()方法已經(jīng)不被推薦，那么那么就用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綁定點(diǎn)擊事件的方法

jQuery綁定點(diǎn)擊事件可以使用其綁定事件函數(shù)

jquery中四個事件綁定方式（bind,live,delegate,on）

1、bind()????

簡要描述

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

使用方式

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

event：必需項(xiàng)；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).bind("click",data,function);

多事件處理：

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

2.利用大括號靈活定義多事件，例如?$(selector).bind({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；

大括號替代方式：綁定較為靈活，可以給事件單獨(dú)

綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來代替。

2、live()? ?

簡要描述

live()?向當(dāng)前或未來的匹配元素添加一個或多個事件處理器；

使用方式

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

event：必需項(xiàng)；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如?$(selector).live("click",data,function);

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

2.利用大括號靈活定義多事件，例如?$(selector).live({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；

大括號替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

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

3、delegate()

簡要描述

delegate()?為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

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

childSelector:?必需項(xiàng)；需要添加事件處理程序的元素，一般為selector的子元素；

event：必需項(xiàng)；添加到元素的一個或多個事件，例如 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.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；

大括號替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

jquery1.4.2及其以上版本；

4、on()

簡要描述

on()?為指定的元素,添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

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

event：必需項(xiàng)；添加到元素的一個或多個事件，例如 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.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；

大括號替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

childSelector:?可選；需要添加事件處理程序的元素，一般為selector的子元素；

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；

四種方式的異同和優(yōu)缺點(diǎn)

相同點(diǎn)：

1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;

2.均是通過事件冒泡方式，將事件傳遞到document進(jìn)行事件的響應(yīng)；

比較和聯(lián)系:

1.bind()函數(shù)只能針對已經(jīng)存在的元素進(jìn)行事件的設(shè)置；但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置；

2.bind()函數(shù)在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以

用來代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；

3.live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些

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

總結(jié)

如果項(xiàng)目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個人看法

jquery，怎么給多個元素綁定同一個事件，變量

用逗號隔開即可，如綁定類.close和類.cancel兩個元素的點(diǎn)擊事件，其代碼如下：

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

alert("你好");

});

這樣就將兩個元素綁定在同一個事件上了

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

有2種方法：

最簡單的方法就是直接在標(biāo)簽中寫onclick=""，但是這樣寫其實(shí)是有點(diǎn)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');?//動態(tài)像ul的末尾追加一個新元素

});

/script

方法一：使用live

live()函數(shù)會給被選的元素綁定上一個或者多個事件處理程序，并且規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。通過live()函數(shù)適用于匹配選擇器的當(dāng)前及未來的元素。比如，通過腳本動態(tài)創(chuàng)建的元素。

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

alert('OK');

});

方法二：使用on

可以通過on方法綁定事件，可以綁定到它的父級或者body中，實(shí)現(xiàn)如下：

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

alert('OK')

});

或者：

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

alert('OK')

});

注意綁定的事件，需要綁定在父元素。

jquery 多個button綁定同一個事件

你這里id怎么取的一樣？不過影響不大，直接$("button")就可以定位到所有的button元素，得到的是一個list，你循環(huán)

綁定一下click()就好了！

具體你這樣

var list=$("button");

var choose={};

choose.click=function(i){

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

document.ready(function(){

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

choose.click(i);

})

這樣就可以了！

本文名稱：關(guān)于jquery多個元素綁定同一個事件的信息
鏈接地址：http://chinadenli.net/article1/dsgjpid.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、微信公眾號、企業(yè)建站、網(wǎng)站營銷、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)