Post
Ask Question

One Time Event Handling Using jQuery in ASP.Net

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:

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="Script/jquery-1.8.1.min.js" type="text/javascript"></script>  
  5.     <script>  
  6.         $(document).ready(function () {  
  7.             $("#bttnClick").click(function () {  
  8.                 alert('You clicked on Search button.');  
  9.             });  
  10.         });  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <input type="text" id="txtSearch" />  
  15.     <input type="button" id='bttnClick' value="Search" />  
  16. </body>  
  17. </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 when 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.

  1. $("#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.

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="Script/jquery-1.8.1.min.js" type="text/javascript"></script>  
  5.     <script>  
  6.         $(document).ready(function () {  
  7.             $("#bttnClick").on("click", function () {  
  8.                 alert('You clicked on Search button.');  
  9.                 $("#bttnClick").off("click");  
  10.             });  
  11.         });  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <input type="text" id="txtSearch" />  
  16.     <input type="button" id='bttnClick' value="Search" />  
  17. </body>  
  18. </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.

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="Script/jquery-1.8.1.min.js" type="text/javascript"></script>  
  5.     <script>  
  6.         $(document).ready(function () {  
  7.             $("#bttnClick").on("click", function () {  
  8.                 alert('You clicked on Search button.');  
  9.                 $("#bttnClick").off("click");  
  10.             });  
  11.             $("#bttnReInvoke").click(function () {  
  12.                 alert('Search button click event is ready, click for test');  
  13.                 $("#bttnClick").on("click", function () {  
  14.                     alert('You clicked me');  
  15.                     $("#bttnClick").off("click");  
  16.                 });  
  17.             });  
  18.         });  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <input type="text" id="txtSearch" />  
  23.     <input type="button" id='bttnClick' value="Search" />  
  24.     <input type="button" id='bttnReInvoke' value="On Search button Click Event" />  
  25. </body>  
  26. </html> 

Now look at the following code:

  1. $("#bttnReInvoke").click(function () {  
  2. alert('Search button click event is ready, click for test');  
  3. $("#bttnClick").on("click", function () {  
  4.     alert('You clicked me');  
  5.     $("#bttnClick").off("click");  
  6.     });  
  7. }); 

This code will on click event of search button.

That's it; if you have any query, you can send your comments.


Similar Articles