Click event handler of a button using JQuery-
when mouse pointer is over the button and mouse button is pressed and released then click event handler of the button will be fired. We can implement some logic/rules into this handler based on the business requirements.
creating click event handler on a button could be required in two types of scenario-Scenario 1: when button is existing into the form or direct on the page.
Scenario 2: when button is existing inside another control like grid-view, repeater or any other control.
We will check with both the scenario one by one, Let's see the first scenario -
Scenario 1
when button is existing into the form or direct on the page
Let's follow the below steps :
Step 1 -Add a button to your aspx page under body section with an unique id
<body>
<form id="form1" runat="server">
<button type="button" id="formButtonClick">Click!</button>
</form>
</body>
Step 2 - add the jquery-1.9.1.js file(click here to download) into head section of the aspx page.
<head runat="server"><title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
</head>
Step 3 - Define the event handler and required function
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Call function to bind event handler
BindEventHandler();
});
//Function definition for binding the event handler
function BindEventHandler() {
$("#formButtonClick").on("click", clickeventonformButton1);
}
//explain the event handler
function clickeventonformButton1() {
alert($(this).text());
}
</script>
</head>
Step 4- Right click on the page and 'View in Browser'
Click on the button - as per our logic alert popup will come
Scenario 2
when button is existing inside another control like grid-view repeater or any other control
Let's follow the below steps:
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<button type="button" class="gridbutton"><%# Eval("Serial") %></button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Step 2 - Same as above
Let's follow the below steps:
Step 1 - Add a gridview to your aspx page under body section with an unique id and create a button inside it in a column
<body>
<form id="form1" runat="server">
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
<Columns><asp:TemplateField HeaderText="Action">
<ItemTemplate>
<button type="button" class="gridbutton"><%# Eval("Serial") %></button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
Step 2 - Same as above
Step 3 - Define the event handler and required function
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Call function to bind event handler
BindEventHandler();
});
//Function definition for binding the event handler
function BindEventHandler() {
$("#Gridview1").on("click",".gridbutton", clickeventonformButton1);
}
//explain the event handler
function clickeventonformButton1() {
alert($(this).text());
}
</script>
</head>
Step 4 - Right click on the page and View in Browser
Click on the button - as per our logic alert popup will come
0 Comments