jQuery .live() event
Syntax and Description
.live(eventType, handler)
eventType is a string containing a JavaScript event type such as click or keydown.
handler is a function to execute each time the event is triggered.
Return value is the the jQuery object, for chaining purposes.
.live() attaches a handler to the event
for all elements that match the current selector,
now or in the future.
.bind() only attaches event handler for existing elements.
For instance, consider the following HTML code:
<body>/* w ww.ja v a 2 s . c om*/
<div class="clickme">
Click here
</div>
</body>
We can bind a simple click handler to this element.
$('.clickme').bind('click', function() {
$.print('Bound handler called.');
});
However, suppose that another element is added after this.
$('body').append('<div class="clickme">Another target</div>');
This new element also matches the selector .clickme,
but since it was added after
the call to .bind(), clicks on it will do nothing.
The .live() method binds event handler to the
future-added element as well as the current ones.
Suppose we bind a click handler to the target element using .live().
$('.clickme').live('click', function() {
$.print('Live handler called.');
});
And then we add a new element to this.
$('body').append('<div class="clickme">Another target</div>');
Then clicks on the new element will also trigger the handler.
Not all event types are supported by .live().
Only custom events and the following JavaScript events may
be bound with .live():
- click
- dblclick
- keydown
- keypress
- keyup
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup
To stop further handlers from executing after one bound using .live(),
the handler must return false.
Bind for future added element
The following code adds event handler for a non-exist id. Then it adds an with that id value to the document.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script>
$(function(){ <!-- www.ja v a2 s . c om-->
// element doesn't exist yet, but we can create handler
// anyways
$("#anchor").live("click", function(event){
document.writeln("I have a handler");
});
$(document).append("<a id='anchor'> I go no where </a>")
});
</script>
</head>
<body>
</body>
</html>
cancel future event
The following code live binds click event for header and cancel the click event during the event handling.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j av a 2 s . c om-->
$("h1").live("click", function(event){
event.preventDefault();
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
Bind click event for all div elements
The following code binds a handler to an event (like click) for all current and future matched element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w. j av a 2s .c o m-->
$("div").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
</head>
<body>
<body>
<div><h1>java 2s.com</h1></div>
</body>
</html>