One Time Event Handling Using jQuery in ASP.NET

Mishra Sourabh

Rate me:

4.00/5 (1 vote)

12 May 2014CPOL2 min read

8.9K

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:

JavaScript

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

<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

<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:

HTML

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

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

One Time Event Handling Using jQuery in ASP.NET

Introduction

Using the Code

License

Comments and Discussions