.live()

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 w  w .  j  av a 2 s.  c  o  m*/
     <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(){ <!-- w  w  w. ja  v a2s. c  o  m-->
                // 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

The code above generates the following result.

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(){<!--  ww  w.j a  v a2 s.co  m-->
              $("h1").live("click", function(event){
                   event.preventDefault();
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

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(){<!--  w  w  w . ja  v a  2 s. 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>

Click to view the demo

The code above generates the following result.