Search
About Me
書僮 -不斷學習及探索
Categories
Popular Posts
Recent Comments
Get this Recent Comments Widget
【jQuery】live()的使用方法(轉貼)
/
1 Comments
live(type, [data], fn)
參數
typeString 事件類型
data (可選) Object 欲綁定的事件處理函數
fn Function 欲綁定的事件處理函數
概述:
jQuery 給所有符合的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效，這個方法是基本的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而以後再添加的元素則不會有。為此需要再使用一次 .bind() 才行。比如說
<body> <div class="clickme">Click here</div> <body>
可以給這個元素綁定一個簡單的click事件：
$('.clickme').bind('click', function(){
alert("Bound handler called.");
});
當點擊了元素，就會彈出一個警告。然後，想像一下這之後有另一個元素添加進來了。
$('body').append('<div class="clickme">Another target</div>');
儘管這個新的元素也能夠符合選擇器 ".clickme" ，但是由於這個元素是在調用 .bind() 之後添加的，所以點擊這個元素不會有任何效果。
.live() 就提供了對應這種情況的方法。如果我們是這樣綁定click事件的：
$('.clickme').live('click', function() {
alert("Live handler called.");
});
然後再添加一個新元素：
$('body').append('<div class="clickme">Another target</div>');
然後再點擊新增的元素，他依然能夠觸發事件處理函數。
事件委託
.live() 方法能對一個還沒有添加進DOM的元素有效，是由於使用了事件委託：綁定在父項目上的事件處理函數可以對在後代上觸發的事件作出回應。
傳遞給 .live() 的事件處理函數不會綁定在元素上，而是把他作為一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。在我們的例子中，當點擊新的元素後，會依次發生下列步驟：
1、生成一個click事件傳遞給 <div> 來處理
2、由於沒有事件處理函數直接綁定在 <div> 上，所以事件冒泡到DOM樹上
3、事件不斷冒泡一直到DOM樹的根節點，預設情況下上面綁定了這個特殊的事件處理函數。
4、執行由 .live() 綁定的特殊的 click 事件處理函數。
5、這個事件處理函數首先檢測事件物件的 target 來確定是不是需要繼續。這個測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。
6、如果找到了匹配的元素，那麼調用原始的事件處理函數。
由於只有在事件發生時才會在上面的第五步裡做測試，因此在任何時候添加的元素都能夠回應這個事件。
附加說明
.live() 雖然很有用，但由於其特殊的實現方式，所以不能簡單的在任何情況下替換 .bind()。主要的不同有：
在jQuery 1.4中，.live()方法支持自訂事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支援 focus 和 blur 事件了（映射到更合適，並且可以冒泡的focusin和focusout上）。
另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自訂事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 並不完全支持通過DOM遍歷的方法找到的元素。取而代之的是，應當總是在一個選擇器後面直接使用 .live() 方法，正如前面例子裡提到的。
當一個事件處理函數用 .live() 綁定後，要停止執行其他的事件處理函數，那麼這個函數必須返回 false。 僅僅調用 .stopPropagation() 無法實現這個目的。
參考 .bind() 方法可以獲得更多關於事件綁定的資訊。
在jQuery 1.4.1中，你可以一次綁定多個事件給 .live() ，跟 .bind() 提供的功能類似。
在jQuery 1.4 中，data參數可以用於把附加資訊傳遞給事件處理函數。一個很好的用處是應付由閉包導致的問題。可以參考 .bind() 的討論來獲得更多資訊。
範例:
HTML 代碼:
<p>Click me!</p>
jQuery 代碼:
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
描述:
阻止默認事件行為和事件冒泡，返回 false
jQuery 代碼:
$("a").live("click", function() { return false; });
描述:
僅僅阻止默認事件行為
jQuery 代碼:
$("a").live("click", function(event){
event.preventDefault();
});
文章來源
http://blog.163.com/quan2006@126/blog/static/17022863520114421019458/
Test
回覆刪除