.live()
.live( events, handler(eventObject) ) Returns: jQuery
Description: Attach an event handler for all elements which match the current selector, now and in the future.
-
version added: 1.3.live( events, handler(eventObject) )
eventsA 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.
handler(eventObject)A function to execute at the time the event is triggered.
-
version added: 1.4.live( events, data, handler(eventObject) )
eventsA 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.
dataA map of data that will be passed to the event handler.
handler(eventObject)A function to execute at the time the event is triggered.
-
version added: 1.4.3.live( events-map )
events-mapA map of one or more JavaScript event types and functions to execute for them.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.
Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:
$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+
The events argument can either be a space-separated list of event type names and optional namespaces, or an event-map of event names strings and handlers. The data argument is optional and can be omitted. For example, the following three method calls are functionally equivalent (but see below for more effective and performant ways to attach delegated event handlers):
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); }); // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+
Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():
- jQuery attempts to retrieve the elements specified by the selector before calling the
.live()method, which may be time-consuming on large documents. - Chaining methods is not supported. For example,
$("a").find(".offsite, .external").live( ... );is not valid and does not work as expected. - Since all
.live()events are attached at thedocumentelement, events take the longest and slowest possible path before they are handled. - On mobile iOS (iPhone, iPad and iPod Touch) the
clickevent does not bubble to the document body for most elements and cannot be used with.live()without applying one of the following workarounds:- Use natively clickable elements such as
aorbutton, as both of these do bubble todocument. - Use
.on()or.delegate()attached to an element below the level ofdocument.body, since mobile iOS does bubble within the body. - Apply the CSS style
cursor:pointerto the element that needs to bubble clicks (or a parent includingdocument.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
- Use natively clickable elements such as
- Calling
event.stopPropagation()in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated todocument. - The
.live()method interacts with other event methods in ways that can be surprising, e.g.,$(document).unbind("click")removes all click handlers attached by any call to.live()!
For pages still using .live(), this list of version-specific differences may be helpful:
- Before jQuery 1.7, to stop further handlers from executing after one bound using
.live(), the handler must returnfalse. Calling.stopPropagation()will not accomplish this. - As of jQuery 1.4 the
.live()method supports custom events as well as all JavaScript events that bubble. - In jQuery 1.3.x only the following JavaScript events could be bound:
click,dblclick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover, andmouseup.
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.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: Cancel a default action and prevent it from bubbling up by returning false.
$("a").live("click", function() { return false; })Example: Cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){
event.preventDefault();
});Example: Bind custom events with .live().
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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:
Example: Use a map to bind multiple live event handlers. Note that .live() calls the click, mouseover, and mouseout event handlers for 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.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$("p").live({
click: function() {
$(this).after("<p>Another paragraph!</p>");
},
mouseover: function() {
$(this).addClass("over");
},
mouseout: function() {
$(this).removeClass("over");
}
});
</script>
</body>
</html>