jquery live()重復(fù)綁定的解決方法介紹
Query中.live()方法的使用方法
今天在寫代碼的時(shí)候遇到一個(gè)問(wèn)題,直接上代碼看:
$(function(){
$(".file").live("click",function(){
var task_name=$(this).text();
$("#selecting tbody").append("<trclass=gradeA'><tdclass='center'>"+task_name+"</td></tr>");
});
});
$(".file")對(duì)象是從后臺(tái)傳過(guò)來(lái)的,click肯定是不行的,bind()也無(wú)法獲取動(dòng)態(tài)添加的元素,因此只能用live(),但是使用live()遇到的問(wèn)題是表格行會(huì)莫名其妙的添加了兩行,即綁定事件重復(fù)執(zhí)行了,糾結(jié)了一上午終于找到了原因,先看live()方法的介紹。
live(type, [data],fn)
概述
jQuery給所有匹配的元素附加一個(gè)事件處理函數(shù),即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效。
這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind()時(shí),選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù),而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。比如說(shuō)
<body>
<div class="clickme">Clickhere</div>
<body>
可以給這個(gè)元素綁定一個(gè)簡(jiǎn)單的click事件:
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});
當(dāng)點(diǎn)擊了元素,就會(huì)彈出一個(gè)警告框。
然后,想象一下這之后有另一個(gè)元素添加進(jìn)來(lái)了。
$('body').append('<div class="clickme">Another target</div>');
盡管這個(gè)新的元素也能夠匹配選擇器".clickme" ,但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的,所以點(diǎn)擊這個(gè)元素不會(huì)有任何效果。
.live()就提供了對(duì)應(yīng)這種情況的方法。如果我們是這樣綁定click事件的:
$('.clickme').live('click', function() {
alert("Live handler called.");
});
然后再添加一個(gè)新元素:
$('body').append('<divclass="clickme">Anothertarget</div>');
然后再點(diǎn)擊新增的元素,他依然能夠觸發(fā)事件處理函數(shù)。
事件委托
.live()方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)DOM的元素有效,是由于使用了事件委托:綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。
傳遞給 .live()的事件處理函數(shù)不會(huì)綁定在元素上,而是把他作為一個(gè)特殊的事件處理函數(shù),綁定在 DOM樹(shù)的根節(jié)點(diǎn)上。在我們的例子中,當(dāng)點(diǎn)擊新的元素后,會(huì)依次發(fā)生下列步驟:
1、生成一個(gè)click事件傳遞給<div> 來(lái)處理
2、由于沒(méi)有事件處理函數(shù)直接綁定在 <div>上,所以事件冒泡到DOM樹(shù)上
3、事件不斷冒泡一直到DOM樹(shù)的根節(jié)點(diǎn),默認(rèn)情況下上面綁定了這個(gè)特殊的事件處理函數(shù)。
4、執(zhí)行由 .live()綁定的特殊的 click 事件處理函數(shù)。
5、這個(gè)事件處理函數(shù)首先檢測(cè)事件對(duì)象的 target 來(lái)確定是不是需要繼續(xù)。這個(gè)測(cè)試是通過(guò)檢測(cè)$(event.target).closest('.clickme') 能否找到匹配的元素來(lái)實(shí)現(xiàn)的。
6、如果找到了匹配的元素,那么調(diào)用原始的事件處理函數(shù)。
由于只有在事件發(fā)生時(shí)才會(huì)在上面的第五步里做測(cè)試,因此在任何時(shí)候添加的元素都能夠響應(yīng)這個(gè)事件。
附加說(shuō)明
.live()雖然很有用,但由于其特殊的實(shí)現(xiàn)方式,所以不能簡(jiǎn)單的在任何情況下替換 .bind()。主要的不同有:
在jQuery 1.4中,.live()方法支持自定義事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合適,并且可以冒泡的focusin和focusout上)。
另 外,在jQuery1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定義事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live()并不完全支持通過(guò)DOM遍歷的方法找到的元素。取而代之的是,應(yīng)當(dāng)總是在一個(gè)選擇器后面直接使用 .live()方法,正如前面例子里提到的。
當(dāng)一個(gè)事件處理函數(shù)用 .live()綁定后,要停止執(zhí)行其他的事件處理函數(shù),那么這個(gè)函數(shù)必須返回 false。 僅僅調(diào)用 .stopPropagation()無(wú)法實(shí)現(xiàn)這個(gè)目的。
參考 .bind() 方法可以獲得更多關(guān)于事件綁定的信息。
在jQuery 1.4.1中,你可以一次綁定多個(gè)事件給 .live() ,跟.bind() 提供的功能類似。
在jQuery 1.4中,data參數(shù)可以用于把附加信息傳遞給事件處理函數(shù)。一個(gè)很好的用處是應(yīng)付由閉包導(dǎo)致的問(wèn)題??梢詤⒖?.bind()的討論來(lái)獲得更多信息。
參數(shù)
typeString 事件類型
data(可選) Object 欲綁定的事件處理函數(shù)
fn Function 欲綁定的事件處理函數(shù)
示例
HTML 代碼:
<p>Clickme!</p>
jQuery 代碼:
$("p").live("click", function(){
$(this).after("<p>Anotherparagraph!</p>");
});
描述:
阻止默認(rèn)事件行為和事件冒泡,返回false
jQuery 代碼:
$("a").live("click",function() { return false; });
//根本原因在這,需要阻止默認(rèn)事件行為和事件冒泡,在代碼后面添加return false;就OK了
描述:
僅僅阻止默認(rèn)事件行為
jQuery 代碼:
$("a").live("click", function(event){
event.preventDefault();
});
相關(guān)文章
jQuery查詢數(shù)據(jù)返回object和字符串影響原因是什么
查詢數(shù)據(jù)返回object和字符串,導(dǎo)致這兩種情況的原因是什么呢?在本文將為大家詳細(xì)介紹下,具體祥看代碼2013-08-08jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理
下面小編就為大家?guī)?lái)一篇jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery 字符串切割函數(shù)substring的用法說(shuō)明
本篇文章主要是對(duì)jquery字符串切割函數(shù)substring的用法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02JQuery slideshow的一個(gè)小問(wèn)題(如何發(fā)現(xiàn)及解決過(guò)程)
在做一個(gè)網(wǎng)頁(yè)homepage的時(shí)候,想用slideshow[1]做圖片切換效果,在打開(kāi)頁(yè)面所以的正常測(cè)試都沒(méi)問(wèn)題:當(dāng)瀏覽器同時(shí)打開(kāi)多個(gè)tab,停留他tab中的頁(yè)面一段時(shí)間后,會(huì)出現(xiàn)圖片是最后一張圖片,針對(duì)這個(gè)問(wèn)題,本文給予了詳細(xì)的解決方法,感興趣的朋友可以了解下2013-02-02JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開(kāi)始的選定后,還可以通過(guò)一系列JQuery提供的方法對(duì)包裝集內(nèi)的元素進(jìn)行擴(kuò)充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12