.live()
.live( eventType, handler ) 返回： jQuery
描述： 附加一個事件處理器到符合目前選擇器的所有元素匹配，現(xiàn)在和未來。
-
version added: 1.3.live( eventType, handler )
eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.
handler每次事件觸發(fā)時會執(zhí)行的函數(shù)。
-
version added: 1.4.live( eventType, eventData, handler )
eventType一個包含一個JavaScript事件類型的字符串，比如"click"或"keydown"。在jQuery 1.4中，該字符串可以包含多個用空格分隔的事件類型或自定義事件名稱。
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler每次事件觸發(fā)時會執(zhí)行的函數(shù)。
這個方法是基于.bind()方法在元素上綁定事件處理器的一種變化。當(dāng).bind()被調(diào)用時，該元素的jQuery對象，是指附加處理器的元素;后面引入的讓元素不能這樣做，所以他們需要另一個.bind()調(diào)用?？聪旅娴拇a：
<body>
<div class="clickme">
Click here
</div>
</body>
我們可以在這個元素上綁定一個簡單的點擊處理器：
$('.clickme').bind('click', function() {
// Bound handler called.
});
當(dāng)元素被點擊時，該處理程序被調(diào)用。但是，假設(shè)在此之后，另一個因素被增加：
$('body').append('<div class="clickme">Another target</div>');
這個新元素也匹配.clickme選擇器，但因為它是調(diào)用.bind()后再添加的 ，點擊它什么都不會做。
.live()方法提供了一個可以替代的行為。如果我們綁定單擊處理器到目標(biāo)元素使用此方法：
$('.clickme').live('click', function() {
// Live handler called.
});
再后來加入新元素：
$('body').append('<div class="clickme">Another target</div>');
然后點擊新添加的元素也會觸發(fā)的處理程序。
事件描述
.live()方法能影響尚未通過對事件的DOM方法添加的使用元素：綁定到父元素的處理程序是對于那些在其后代觸發(fā)的事件負(fù)責(zé)。傳遞給處理器給.live()從不綁定到一個元素;相反， .live()綁定一個特殊的處理到DOM樹的根。在我們的例子，當(dāng)新的元素被點擊，執(zhí)行以下步驟：
- 一個Click事件生成，并傳遞到
<div>處理。 - 沒有處理器是直接綁定到，因此事件向上冒泡的DOM樹。
- 這個時間泡沫，直到它到達(dá)樹的根，
.live()默認(rèn)情況下結(jié)合其特殊的處理。
* 在 jQuery 1.4中, 事件冒泡可以隨意停在 "context" DOM元素的。- 特別
click通過.live()執(zhí)行的處理器。- 此處理程序測試
target的事件對象，看它是否應(yīng)該繼續(xù)下去。 這項測試是由檢查，如果$(event.target).closest('.clickme')是能夠找到一個匹配的元素。- 如果找到一個匹配的元素，原來的處理程序被調(diào)用就可以了。
因為直到事件發(fā)生時在第5步不進(jìn)行測試，元素可以在任何時候添加，仍然響應(yīng)事件。.
更多信息見
.bind()。Multiple Events
在jQuery 1.4.1 中，
.live()能接受多個，用空間分隔事件，在提供類似.bind()的功能 。例如，我們可以“l(fā)ive ” 同時綁定mouseover和mouseout事件,像這樣：$('.hoverme').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { // do something on mouseover } else { // do something on mouseout } });Event Data
在jQuery 1.4 中，可選
eventData參數(shù)允許我們通過附加信息處理程序。一個方便的使用這個參數(shù)來解決由于閉包造成的問題。更多信息見"Passing Event Data"。Event Context
在jQuery 1.4 中， live事件可以綁定到“context”DOM元素，而不是默認(rèn)的文檔的根。要設(shè)置此背景下，我們通過在一個單一的DOM元素(而不是一個jQuery集合或選擇 器)使用
jQuery()function's second argument。$('div.clickme', $('#container')[0]).live('click', function() { // Live handler called. });The live handler in this example is called only when
<div class="clickme">is a descendant of an element with an ID of "container."Caveats
The
.live()technique is useful, but due to its special approach cannot be simply substituted for.bind()in all cases. Specific differences include:- DOM traversal methods are not fully supported for finding elements to send to
.live(). Rather, the.live()method should always be called directly after a selector, as in the example above. - To stop further handlers from executing after one bound using
.live(), the handler must returnfalse. Calling.stopPropagation()will not accomplish this. - In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with
.live():click,dblclick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover, andmouseup.
- As of jQuery 1.4 the
.live()method supports custom events as well as all JavaScript events. As of jQuery 1.4.1 evenfocusandblurwork with live (mapping to the more appropriate, bubbling, eventsfocusinandfocusout). - As of jQuery 1.4.1 the
hoverevent can be specified (mapping tomouseenterandmouseleave, which, in turn, are mapped tomouseoverandmouseout).
Examples:
Example: Click a paragraph to add another. Note that .live() binds the click event to all paragraphs - even new ones.
<!DOCTYPE html> <html> <head> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <p>Click me!</p> <span></span> <script> $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); }); </script> </body> </html>Demo:
Example: To display each paragraph's text in an alert box whenever it is clicked:
$("p").live("click", function(){ alert( $(this).text() ); });Example: To cancel a default action and prevent it from bubbling up, return false:
$("a").live("click", function() { return false; })Example: To cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){ event.preventDefault(); });Example: Can bind custom events too.
<!DOCTYPE html> <html> <head> <style> p { color:red; } span { color:blue; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <p>Has an attached custom event.</p> <button>Trigger custom event</button> <span style="display:none;"></span> <script> $("p").live("myCustomEvent", function(e, myName, myValue){ $(this).text("Hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); }); </script> </body> </html>Demo:
- 這個時間泡沫，直到它到達(dá)樹的根，