jQuery Click event on asp:button

Question

I have a server side button as

<asp:Button ID="btnSummary" runat="server" OnClick="btnSummary_Click" Text="Next" />

I want to attach the jQuery Click event using its ID and NOT using the alternative class attribute way.

I tried to attach the click event as:

$("#btnSummary").click(function() 
        {
            alert("1");
        });

But, its click event is not fired. Also, I have also tried $("id[$btnSummary]").

Is there any way to attach the click event on asp:button using jQuery without the class attribute on the button?

add `event.preventDefault()`, either to the beginning or before any AJAX calls, if needed. — GoldBishop, Feb 06 '17 at 18:22

score 15 · Answer 1 · edited May 23 '17 at 12:09

Some of the options you have can be found here

How to stop ASP.NET from changing ids in order to use jQuery

EDIT:

After reading your comments on other answers, it sounds like you need to bind the onclick event handler inside of ASP.NET AJAX's pageLoad, so that it is bound on every postback, including asynchronous postbacks. On the other hand, $(document).ready() binds only once on initial page load

function pageLoad(sender, args)
{
     $("#<%=btnSummary.ClientID %>").click(function() 
    {
        alert("1");
    });
}

Dave Ward wrote a nice article on the difference between pageLoad and $(document).ready().

score 11 · Accepted Answer · edited Aug 12 '11 at 18:42

11

Add ClientIDMode="Static" to your asp:button, something like this:

<asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Button" />

This will make the ID remain the same. It disables the autogenerated names for this control.

Here is the reference for this: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

edited Aug 12 '11 at 18:42

m4tt1mus

1,642
14
24

answered Aug 11 '11 at 21:52

Luis Coell

126
1
2

Ólafur Waage · Answer 3 · 2009-04-04T10:24:34.043

5

Check if the id attribute is in the html source when you run the site.
Do you have the click function inside a document ready function ?

-

$(document).ready(function() {
    // put all your jQuery goodness in here.
});

EDIT:

Since its a server side control and the ID changes, you will need to dynamically update the javascript on every page load with the variable.

edited Apr 04 '09 at 10:24

answered Apr 04 '09 at 09:44

Ólafur Waage

68,817
22
142
198

Yes.. My code is inside the document.ready portion. Id is also their in the HTML but its server side control. its ID gets changed. That's why I am asking this question. – Sachin Gaur Apr 04 '09 at 09:54

score 1 · Answer 4 · answered Sep 09 '16 at 16:31

Assigning the selector to the class worked for me.

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="My Button" CssClass="myButton"/>

<script>
    jQuery(".myButton").click(function () {
        alert("clicked");
    });
</script>

John Leidegren · Answer 5 · 2009-04-04T10:00:04.913

1

ASP.NET generates a UniqueID for client-side stuff, you can use that to bind the event. That ID is generated based on the position of that Control inside a ControlCollection and different INamingContainers, it's ugly and you can't guess it...

Add this kind of code somewhere on your page to hook up that button.

<script type="text/javascript">
  $(function() { $("#<%=btnSummary.ClientID%>") }).click(function(){/*...*/});
</script>

edited Apr 04 '09 at 10:00

answered Apr 04 '09 at 09:50

John Leidegren

59,920
20
131
152

I cannot use your suggestion as I have to add UpdatePanel dynamically. It's our website requirement. – Sachin Gaur Apr 04 '09 at 09:52
Is the button inside of an UpdatePanel that you are adding dynamically? – Russ Cam Apr 04 '09 at 09:54
Well, if you don't know the ClientID and you don't have a way of hooking the UpdatePanel onchange, you are, as we say, screwed. Seriously, you'll need to pass those ClientIDs as they would appear in HTML. If you use Firefox you can examine the returned DOM by the UpdatePanel. – John Leidegren Apr 04 '09 at 09:59
The ClientID s are there, you'll just have to hook the binding on click events to the success of an UpdatePanel update. That should be easy. – John Leidegren Apr 04 '09 at 09:59
you cant turn off the auto generated IDs – m4tt1mus Aug 12 '11 at 18:01

score 1 · Answer 6 · answered Apr 15 '09 at 19:49

I'm little confused here now. Let me explain:

1. I added a button on the page:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server"  Text="Button" />
<div>

2. Then I added a JavaScript and jQuery:
<script type="text/javascript">
                    $(document).ready(function() {
                    $("#Button1").click(function() {
                        alert("Hello world!");
                    });

                    });
                </script>

3. The generated html is this:
<div>
  <input type="submit" name="Button1" value="Button" id="Button1" />
<div>

Now, I don't see ASP.NET (asp.net 3.5) changing the ids. Why do I see different behavior?

Btw. This does work when I hit the button!

Thanks.

score 0 · Answer 7 · edited Feb 11 '16 at 07:20

0

ASP.NET adds to you id (example: id "selectButton" becomes

"ctl00_middleContent_gvPeople_ctl04_selectButton");

Use the jquery syntax to search for the part of the id that doesn't change.

$("[id='_selectButton']")

edited Feb 11 '16 at 07:20

Musakkhir Sayyed

7,012
13
42
65

answered Oct 12 '09 at 21:58

Bless Yahu

1,331
1
12
25

score 0 · Answer 8 · answered Nov 07 '13 at 14:10

0

use pageLoad when using updatepanels because document.ready only runs once on initialization of the page and loses its binding on partial postbacks. PageLoad gets run everytime so will rebind every partial postback.

answered Nov 07 '13 at 14:10

Alex Stephens

3,017
1
36
41

score 0 · Answer 9 · answered Mar 05 '14 at 07:51

0

I had the same problem, this works for me

<asp:Button ID="Button1" runat="server" Text="ASP Button" OnClientClick="return false;" />

Its the addition of return false that seems to make the difference. Hope this helps.

regards

Peter

answered Mar 05 '14 at 07:51

Peter

1

score 0 · Answer 10 · edited Feb 08 '19 at 19:18

0

Please use the following syntax : $("[id*=Button1]") to reference any asp control

edited Feb 08 '19 at 19:18

Eray Balkanli

7,752
11
48
82

answered Aug 29 '17 at 08:00

user3615318

125
1
1

score 0 · Answer 11 · edited Feb 08 '19 at 19:18

0

Please try below:

document.getElementById("<%=button1.ClientID %>").click();

edited Feb 08 '19 at 19:18

Eray Balkanli

7,752
11
48
82

answered Nov 23 '18 at 10:49

Ankursonikajen

51
6

score 0 · Answer 12 · answered Oct 09 '20 at 20:31

Wrap this <asp:Button/> inside a html <div> container.

<div id="testG">  
   <asp:Button ID="btn1" runat="server" Text="TestButton" />
</div>

$(document).ready(function () {
    $("#testG").click(function () {
                alert("1");
                //your code 
     });
});

score -1 · Answer 13 · edited Feb 16 '16 at 16:48

-1

You have reached there. There are two ways i guess,

Either inspect the control from Browser and See the Control ID, looks like ct1000_ btnSummary. use this ID on Click event of jQuery.

replace code

 $("#ctl00_contentplcedholder_btnSummary").click(function() 
    {
        alert("1");
    });

Next one is quite easy just add an attribute ClientIdMode="static" to your control and use your actual Jquery click event it will fire.

edited Feb 16 '16 at 16:48

Andrii Krupka

4,276
3
20
41

answered Feb 16 '16 at 16:26

DDK

71
1
8

very bad form....if the control is moved to a different `container`, then the id is changed. This does not allow for dynamic movement and does not solve the potential MVC or MVVM templating design. – GoldBishop Feb 06 '17 at 18:20
@GoldBishop yea that's why better to choose the second option – DDK Apr 06 '20 at 17:07

jQuery Click event on asp:button

13 Answers13

Linked