Back to: jQuery Tutorials
Event Delegation using jQuery Live Function with Examples
In this article, I am going to discuss Event Delegation using the jQuery Live function with Examples. In our previous two articles, we have discussed how to perform event delegation using on() and delegate() methods. Another way to perform event delegation is by using the jQuery live() function.
jQuery Live Function()
The live() method attaches one or more event handlers for selected elements and specifies a function to run when the events occur. Event handlers attached using the live() method will work for both current and Future elements matching the selector (like a new element created by a script).
Syntax: $(selector).live(event, data, function)
Parameters:
- event: Required. Specifies one or more events to attach to the elements. Multiple event values are separated by space. Must be a valid event.
- data: Optional. Specifies additional data to pass along to the function.
- function: Required. Specifies the function to run when the event occurs
(Reference: https://www.w3schools.com/jquery/event_live.asp)
Note: The live() method was deprecated in jQuery version 1.7, and removed in version 1.9
jQuery die() function
The die() method removes one or more event handlers, added with the live() method, for the selected elements.
Syntax: $(selector).die(event, function)
Parameters:
- event: Required. Specifies one or more event handlers to remove. Multiple event values are separated by space. Must be a valid event.
- function: Optional. Specifies a specific function to remove.
(Reference: https://www.w3schools.com/jquery/event_die.asp)
Note: The die() method was deprecated in jQuery version 1.7, and removed in version 1.9.
Example: jQuery Live Function()
The example that we worked with in previous articles is rewritten using the jQuery live() and die() functions as shown below. Notice that, to perform event delegation we are using the live() function, and to stop event delegation we are using the die() function.
One important thing is that we have to work with the older jQuery version to show the live() and die() method, because these were completely removed in version 1.9. So, we are using version 1.7 here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
p {
margin: 20px auto;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
width: 100%;
padding: 20px;
border-radius: 30px;
background-color: rgb(255, 164, 164);
cursor: pointer;
}
button {
background-color: #1c4450;
border: none;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
outline: none;
display: inline-block;
font-size: 20px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
}
</style>
</head>
<body>
<h1>jQuery live function</h1>
<div class="container">
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
</div>
<div>
<button id="btnadd">Add a new paragraph element</button>
<button id="undelegate">Undelegate</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").live("click", function () {
$(this).fadeOut(500);
});
$("#btnadd").live("click", function () {
$(".container").append("<p>New Paragraph</p>");
});
$("#undelegate").click(function () {
$("p").die("click");
});
});
</script>
</body>
</html>
With on() and delegate() functions the event gets bubbled up to the specified parent element, whereas with the jQuery live() function the event gets bubbled up all the way to the document object. So, we don’t need to specify the parent element div.container. Notice that we are using each “<p>” element as selector for live() and die() function.
Now run the above code and you will get the following output.
Now add two new paragraphs by clicking on Add a new paragraph element two times. Once you add two paragraphs it should looks as shown below.
Now click on the new and existing paragraphs and those will fade out as shown in the below image.
Now click on the Undelegate button. Once you click on the Undelegate button, then click on the Paragraph element and you will see nothing has happened i.e. the paragraph elements will not fade out.
Example: jQuery Live and Die Function
In the below example, we are binding the click event handler to <p> elements by live() method. And by the button, we are detaching that click event handler from the <p> elements. Notice that, click on the <p> elements, their size, and letter spacing changes. Further, on the button click event, we have removed the click event attached to the paragraph element by using the jQuery die function.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
transition: 0.5s;
}
.btn {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
.btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
cursor: pointer;
}
</style>
</head>
<body>
<h1>jQuery live and die function</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>Click any p element to increase size and letterspacing.</p>
<button class="btn">
Remove event handlers, added with the live() method, for p elements
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
function changeSize() {
$(this).animate({ fontSize: "+=5px" });
}
function changeSpacing() {
$(this).animate({ letterSpacing: "+=5px" });
}
$(document).ready(function () {
$("p").live("click", changeSize);
$("p").live("click", changeSpacing);
$("button").click(function () {
$("p").die("click", changeSize);
});
});
</script>
</body>
</html>
Now run the above application and you will get the following output.
Now click on the Paragraph elements and you will see that the text is enlarging as shown in the below image.
Now, click on the button and then try to click on the paragraphs and you will see that nothing is happening.
Again, the important thing that should be discussed
The jQuery live() function is deprecated in jQuery 1.7 and completely removed in jQuery 1.9. Everything that can be achieved with the following methods can be achieved by using the jQuery on() function.
- live()
- bind()
- delegate()
So, if you are using jQuery 1.7 or a higher version, jQuery recommends using the on() function. We have learned everything about on() method.
In the next article, I am going to discuss how to execute the event of an element only once in jQuery with Examples. Here, in this article, I try to explain jQuery Live Function with Examples and I hope you enjoy this jQuery Live Function article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.