jQuery Event live() Method

The jQuery event live() method is used to attach one or more event handlers to the selected elements and to specify a function to execute when the events occur.

This method is mostly used to bind event handlers to elements that are added to the document at a later time.

The live() method was deprecated in jQuery version 1.7 and removed in version 1.9. Instead, you should use the on() method.

Syntax

Following is the syntax of the jQuery event live() method −

$(selector).live(events, data, function)

Parameters

This method accepts three parameters named 'event', 'data, and 'function', which are described below −

events − A string containing the javascript events.
data − An object conatining data that will be passed to the event handler.
function − An optional function to execute at the time the event is triggered.

Return Value

This method does not have any return value.

Example 1

The following is the basic example of the jQuery event live() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below to hide this message.</p>
   <button>Click me</button>
</body>
<script>
    $('button').live("click", function(){
        $('p').slideToggle();
        //$('span').text("P element hidden");
    });
</script>
</html>

Output

After the above program is executed, it displays a message within a paragraph element. When the button is clicked, the message will be hidden −

Example 2

The following is another example of the jQuery live() method. We use this method to handle the mouseenter event on paragraphs −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    .demo{
        color: red;
        font-family: sans-serif;
        font-size: 25px;
        font-style: italic;
    }
</style>
</head>
<body>
    <p>Mouse enters to change the style.</p>
</body>
<script>
    $('p').live("mouseenter", function(){
        $(this).addClass("demo");
    });
</script>
</html>

Output

After executing the above program, it displays a message when the mouse pointer enters the selected element, and the style will change accordingly −

When the mouse enters the selected element −

Example 3

In the example below, we are using the jQuery live() method with multiple events −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    a{
        display: inline-block;
        width: 100px;
        padding: 5px;
        text-decoration: none;
    }
    .demo{
        background-color: green;
        color: white;
        border-radius: 5px;
        transition: 1s;
    }
</style>
</head>
<body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
    <a href="#">Blog</a>
</body>
<script>
    $('a').live("mouseenter mouseleave", function(event){
        $(this).toggleClass("demo", event.type === "mouseenter");
    });
</script>
</html>

Output

Once the above program is executed, it will display four links. When the mouse pointer enters or leaves the displayed link, a ‘demo’ class will automatically be added to or removed from the links, as shown in the GIF below −

jquery_ref_events.htm

Print Page