Introduction
Sometimes at the time of development, some requirements arise for generating only a one-time event for a specific control. For example, in your page having a button, and you just want an alert message only for a first time click, then if the user clicks on that button, the alert message won't be shown again. Or if you have a submit button, then you want to stop multiple clicks on the submit button on a Student admission form.
For this kind of stuff we have .off(event) method.
See the following code.
Using the Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#bttnClick").click(function () {
alert("You clicked on Search button.");
});
});
</script>
</head>
<body>
<input type="text" id="txtSearch" />
<input type="button" id='bttnClick' value="Search" />
</body>
</html>
When you run this code, you can see there is a TextBox, and a search button, when you click on the search button, you will get an alert message. Every time you click on the search button, you will get an alert message.
If you want to stop the click event for the Search button then after the first click, add the following code:
$("#bttnClick").off("click");
If you see the code above, there is the off method that stops the click event.
.off(event) method: you can use here any event for example blur, change, click as per your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.8.1.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#bttnClick").on("click", function () {
alert( $("#bttnClick").off("click");
});
});
</script>
</head>
<body>
<input type="text" id="txtSearch" />
<input type="button" id='bttnClick' value="Search" />
</body>
</html>
Now if you run the code above, the first time click event works perfect, but then the click event will not work.
So with the use of the .off(event) method, you can stop any event. Now the question is, how to restore the click event for a specific control.
It's pretty simple, look at the following code:
In your present code, add a new button when you click that button, your search button will be ready for clicks.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#bttnClick").on("click", function () {
alert( $("#bttnClick").off("click");
});
$("#bttnReInvoke").click(function () {
alert( $("#bttnClick").on("click", function () {
alert( $("#bttnClick").off("click");
});
});
});
</script>
</head>
<body>
<input type="text" id="txtSearch" />
<input type="button" id='bttnClick' value="Search" />
<input type="button" id='bttnReInvoke' value="On Search button Click Event" />
</body>
</html>
Now look at the following code:
$("#bttnReInvoke").click(function () {
alert('Search button click event is ready, click for test');
$("#bttnClick").on("click", function () {
alert('You clicked me');
$("#bttnClick").off("click");
});
});
This code will Start, click event of search button.
When you run that code, and whenever you click on to bttnReInvoke, then your Search Button will again start for the first time.
So that's it, I hope you enjoy this tip.
