.live()

Syntax

.live(eventType, handler)

Parameters

eventType: A string containing a JavaScript event type such as click or keydown
handler: A function to execute each time the event is triggered

Return value

The jQuery object, for chaining purposes.

Description

.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>
 <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. 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.

Examples

 
<html> 
    <head> 
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script> 
        <script> 
            $(function(){ 
                // 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>

Click to view the demo

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("adiv").live("click", function(event){
                   event.preventDefault();
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Binds a handler to an event (like click) for all current and future matched element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("div").live("click", function(){
                 $(this).after("<p>Another paragraph!</p>");
              });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: