Click here to Skip to main content
Click here to Skip to main content

One Time Event Handling Using jQuery in ASP.NET

, 13 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Sometimes at the time of development, some requirements arise for generating only a one-time event for a specific control.

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('You clicked on Search button.');
                $("#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('You clicked on Search button.');
                $("#bttnClick").off("click");
            });
           $("#bttnReInvoke").click(function () {
                alert('Search button click event is ready, click for test');
               $("#bttnClick").on("click", function () {
                   alert('You clicked me');
                    $("#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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mishra Sourabh
Software Developer
India India
Sourabh Mishra is an IT geek, Developer, Trainer and Animator. He is a Microsoft guy, He is very passionate about Microsoft technologies and a true .Net Warrior. Sourabh started his career, when he was just 15 year old. He loves computer from his childhood.
His programming experience includes C/C++, Asp.Net, C#, Vb.net, WCF, Sqlserver, Entity Framework, MVC and Jquery.
 
Sourabh is awarded by Most Valuable Professional Status. He is always ready to learn new technologies, sharing his knowledge to several online community forums. He loves Bond movies.

Comments and Discussions

 
SuggestionProblem.... PinprofessionalNitij14-May-14 8:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 13 May 2014
Article Copyright 2014 by Mishra Sourabh
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid