麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

淺析jquery某一元素重復綁定的問題

2019-11-20 21:19:33
字體:
供稿:網(wǎng)友

某天晚上寫代碼的時候,突然出了bug,想了很久都不知道問題出在哪里(其實是很簡單的問題,但由于我還是個菜鳥,所以不知道)。幾經(jīng)周折,這中間的過程就不提了,終于讓我在快崩潰的時候,發(fā)現(xiàn)了原因。原來是因為同一jquery元素可以重復綁定,當使用了嵌套綁定的時候,就容易出錯。如代碼:

復制代碼 代碼如下:

$('.test').bind('click',function(){
     $('.last').bind('click',function(){
          alert('nihao');
     });
});

<button class="test">上一級綁定</button>
<button class="last">下一級綁定</button>

當我點擊第一個button時,再點擊第二個button,是沒有問題的??扇绻陧撁嫠⑿轮埃c擊了多次(n次)第一個button的話,此時再點擊第二個button,就出問題了,就會彈出(n個)alert對話框。

解決辦法:在會重復綁定的元素上執(zhí)行解綁,即unbind(),如:
復制代碼 代碼如下:

$('.test').bind('click',function(){
     $('.last').unbind('click').bind('click',function(){
          alert('nihao');
     });
});
 
這樣,不管點擊多少次第一個button,再點擊第二個時,只會彈出一個alert對話框。

這里再介紹兩個與bind()相關(guān)聯(lián)的,one()和live()。
 
one() 方法為被選元素附加一個或多個事件處理程序,并規(guī)定當事件發(fā)生時運行的函數(shù)。當使用 one() 方法時,每個元素只能運行一次事件處理器函數(shù)。通俗的講就是只管用一次。

至于live(),引用別人講的(http://www.cnblogs.com/wujilong/articles/1866834.html):
平時在使用jQuery進行AJAX操作的時候,新生成的元素事件會失效,有時候不得不重新綁定一下事件,但是這樣做很麻煩。例如評論分頁后對評論內(nèi)容的JS驗證會失效等。在jQuery1.3之前有一個插件會解決這個問題http://jquery.com/ ,jQuery1.3增加了一個live()方法,下面是手冊上的說明:

jQuery 1.3中新增的方法。給所有當前以及將來會匹配的元素綁定一個事件處理函數(shù)(比如click事件)。也能綁定自定義事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

還不支持 blur, focus, mouseenter, mouseleave, change, submit

與bind()不同的是,live()一次只能綁定一個事件。

這個方法跟傳統(tǒng)的bind很像,區(qū)別在于用live來綁定事件會給所有當前以及將來在頁面上的元素綁定事件(使用委派的方式)。比如說,如果你給頁面上所有的li用live綁定了click事件。那么當在以后增加一個li到這個頁面時,對于這個新增加的li,其click事件依然可用。而無需重新給這種新增加的元素綁定事件。

.live()與流行的liveQuery插件很像,但有以下幾個主要區(qū)別:

•.live 目前只支持所有事件的子集,支持列表參考上面的說明。
•.live 不支持liveQuery提供的“無事件”樣式的回調(diào)函數(shù)。.live只能綁定事件處理函數(shù)。
•.live 沒有”setup”和”cleanup”的過程。因為所有的事件是委派而不是直接綁定在元素上的。

要移除用live綁定的事件,請用die方法

用法示例:
<div class=”myDiv”></div>

jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});

如果使用javascript動態(tài)創(chuàng)建一個class為mydiv的元素,點擊元素依然會有彈出。為什么使用live后就有了呢?這是因為jquery利用了事件的冒泡機制,直接把事件綁定在了document上,然后通過event.target找出事件的來源。這跟jquery.livequery插件不一樣,jquery.livequery每20毫秒做一次檢查,如有新生成則重新綁定一次事件。

使用live當然有利也有弊:

好處就是:元素更新時不用反復去定義事件。
壞處就是:把事件綁定在document上會在頁面上每一個元素都呼叫一次,如使用不當會嚴重影響性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 日本欧美一区二区三区在线观看 | 久久艹国产精品 | 激情小说激情图片激情电影 | 久久精品视频日本 | 成人444kkkk在线观看 | 国产资源在线视频 | 黄色电影免费提供 | 欧美a区| 在线 日本 制服 中文 欧美 | 欧美一区在线观看视频 | 日韩黄色片在线观看 | 久久久久久久久久久影视 | 亚洲影视中文字幕 | 久草在线资源福利站 | 国产高潮失禁喷水爽到抽搐视频 | 97青青草视频 | 国产一级一片免费播放 | 成人午夜天堂 | 欧美性黄 | 国产精品视频yy9299一区 | 国产人成免费爽爽爽视频 | 91精品免费在线 | 免费黄色在线观看网站 | 看免费黄色一级片 | 91中文在线观看 | 最新91在线视频 | 免费看污视频在线观看 | www.国产一区.com | 狠狠色成色综合网 | 欧美性激情视频 | 免费亚洲视频在线观看 | 国产成人高清在线 | 免费国产视频在线观看 | 国产精品自拍av | 91久久久久久久久久久久久 | 成年人激情在线 | 欧美特黄特色视频 | 5xsq在线视频 | 毛片三区 | 欧美一区二区三区中文字幕 | 高清视频91 |