Updated March 23, 2023
Introduction to jQuery unload()
This jQuery article talks about one of the many jQuery events, unload event and its implementation using jQuery unload() method. jQuery unload() is one of the event methods which attaches a function to execute when a jQuery unload event occurs. jQuery unload() event method is used to bind an event handler to an unload event when it occurs.
The unload event occurs when the user performs any navigation action on a page such as:
- closing the browser window
- reloading a web page
- using forward or back button
- clicking the link “Leave the page”
- typing a new URL in the address bar
Whenever the user navigates away from the page, and the unload event is sent to the window element. An unload event handler should always be bound to the window. This method is a shorthand for method on( “unload”, handler).
Syntax:
Following is the syntax to attach a function to the unload event.
$(selector).unload(function)Where Function refers to the function to be executed on the occurrence of the unload event. It is a mandatory parameter.
Implementation of jQuery unload() method
Let us now try to get a detailed understanding of this concept by looking at the ways of implementing the unload() method in jQuery through some working examples.
Example #1
This example illustrates how the to unload event gets triggered when a link is clicked or the window is closed.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Example for jQuery unload() Method
</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 800px; height: 500px; padding: 20px; font-size: medium; text-align: center; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; margin-top: 50px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function() {
$(window).unload(function() { alert("Goodbye!");
});
});
</script>
</head>
<body>
<div>
<p>Click this link <a href=http://www.google.com>Google</a> or close this w indow for unload event to occur. </p>
</div>
</body>
</html>Explanation to the below output: The below screenshot is captured when the page is first loaded in the browser. No activity has been performed as of now. As shown in the above code, we have used the logic inside $(document).ready, an event that triggers when the document object model is ready. $(window).unload(function()) shows that the unload event handler is always bound to the window object, not the document object. Once the link provided in the paragraph is clicked, or the browser window is closed, an alert pops up before you navigate away to the other page or before the window is
Output:
Example #2
Let us take a look at a similar example where we will see how clicking the forward/backward button, reloading the page or even closing the window triggers unload event.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery unload()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$(window).unload(function() { alert("you are leaving from page");
});
});
</script>
<style> div {
width: 400px; height: 300px; padding: 20px; font-size: medium; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; background: lightgray;
margin-top: 80px; margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<h3 style="color: brown;">Example for jQuery unload event</h3>
<br /><br />
Click forward/backward button or Reload the page or even close the window.
<br /><br />
This will trigger the unload event.
</div>
</body>
</html>Explanation of the below output: Below is the screenshot of the page when it is first loaded in the browser. No activity has been performed until now. Once either the forward/backward arrow is clicked, or page is reloaded, or the browser window is closed, the unload event gets triggered, which in turn executes the attached function. This function attached to the event handler binds itself to the window element and then executes. The execution of the function results in the display of an alert box asking for confirmation if you still want to navigate away from the current page.
Output:
Example #3
This example illustrates how the on before unload event handler can be used instead of unload in cases where Reload or clicking a link does not show an alert pop up in jQuery.
Code:
<!doctype html>
<head>
<title>JQuery Unload Event</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 600px; height: 400px; padding: 20px; font-size: medium;
text-align: center; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<h2 style="text-align: center;">Example for JQuery Unload Event </h2>
<script type="text/javascript">
$(document).ready(function(){
$(window).on('beforeunload ',function() { return 'Are you sure ?';
});
});
</script>
<body>
<div>
<p>Click this link <a href=http://www.google.com>Google</a> or close this win dow for unload event to occur. </p>
</div>
</body>
</html>Explanation of the below output: The below screenshot is captured when the page is first loaded in the browser. No activity has been performed until now.
- Once the link in the above paragraph is clicked, the jQuery unloads () method allows you to bind a function to the event handler for the window element.
- This function on execution displays an alert pop up that asks for confirmation if you still want to navigate away from the current page.
- If you confirm yes, you will be redirected to the target page.
- Many browsers ignore calls to alert(), confirm(), and prompt() inside the event handler.
- The text message returned should be used in a confirmation dialog, but not all browsers support this.
- In a similar manner, on the window close or reloading of the page, an alert box pops up asking for the confirmation.
- The logic behind this is these actions result in the unload event triggering, which in turns execute the attached function with the event handler.
Conclusion
This article demonstrated the implementation of the jQuery unload() method with some working examples. We saw how a to unload event gets triggered and the way it is handled by the jQuery event handler. unload event occurs when the user performs any page navigation action, for example, clicking any link, window close, or page reload. jQuery unload() method is always used with window elements.
Recommended Articles
This is a guide to jQuery unload(). Here we discuss an introduction, syntax, and program to implement in jQuery unload() with proper codes and outputs. You can also go through our other related articles to learn more –
- JQuery fadeToggle
- jQuery slideUp()
- jQuery focus()
- jQuery fadeIn()
