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
– GoldBishop, Commented Feb 6, 2017 at 18:22

Community · Accepted Answer · 2017-05-23 12:09:17Z

15

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().

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 4, 2009 at 9:52

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m4tt1mus · Accepted Answer · 2011-08-12 18:42:57Z

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, 2011 at 18:42

m4tt1mus

1,63514 silver badges25 bronze badges

answered Aug 11, 2011 at 21:52

Luis Coell

1261 silver badge2 bronze badges

Comments

Ólafur Waage · Accepted Answer · 2009-04-04 10:24:34Z

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 4, 2009 at 10:24

answered Apr 4, 2009 at 9:44

Ólafur Waage

70.2k22 gold badges147 silver badges199 bronze badges

1 Comment

Sachin Gaur Over a year ago

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.

John Leidegren · Accepted Answer · 2009-04-04 10:00:04Z

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 4, 2009 at 10:00

answered Apr 4, 2009 at 9:50

John Leidegren

61.3k21 gold badges139 silver badges158 bronze badges

5 Comments

Sachin Gaur Over a year ago

I cannot use your suggestion as I have to add UpdatePanel dynamically. It's our website requirement.

Russ Cam Over a year ago

Is the button inside of an UpdatePanel that you are adding dynamically?

John Leidegren Over a year ago

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 Over a year ago

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.

m4tt1mus Over a year ago

you cant turn off the auto generated IDs

ra170 · Accepted Answer · 2009-04-15 19:49:03Z

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.

GeoffD · Accepted Answer · 2016-09-09 16:31:02Z

1

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>

answered Sep 9, 2016 at 16:31

GeoffD

112 bronze badges

Comments

Alex Stephens · Accepted Answer · 2013-11-07 14:10:44Z

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 7, 2013 at 14:10

Alex Stephens

3,1361 gold badge41 silver badges46 bronze badges

Comments

Peter · Accepted Answer · 2014-03-05 07:51:23Z

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 5, 2014 at 7:51

Peter

1

Comments

Musakkhir Sayyed · Accepted Answer · 2016-02-11 07:20:54Z

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, 2016 at 7:20

Musakkhir Sayyed

7,21813 gold badges44 silver badges67 bronze badges

answered Oct 12, 2009 at 21:58

Bless Yahu

1,3411 gold badge12 silver badges27 bronze badges

Comments

Eray Balkanli · Accepted Answer · 2019-02-08 19:18:22Z

0

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

edited Feb 8, 2019 at 19:18

Eray Balkanli

8,04013 gold badges60 silver badges94 bronze badges

answered Aug 29, 2017 at 8:00

user3615318

1251 silver badge1 bronze badge

Comments

Eray Balkanli · Accepted Answer · 2019-02-08 19:18:30Z

0

Please try below:

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

edited Feb 8, 2019 at 19:18

Eray Balkanli

8,04013 gold badges60 silver badges94 bronze badges

answered Nov 23, 2018 at 10:49

Ankursonikajen

617 bronze badges

Comments

Jay 鲍昱彤 · Accepted Answer · 2020-10-09 20:31:36Z

0

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 
     });
});

answered Oct 9, 2020 at 20:31

Jay 鲍昱彤

2,8201 gold badge23 silver badges33 bronze badges

Comments

Andrii Krupka · Accepted Answer · 2016-02-16 16:48:22Z

-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, 2016 at 16:48

Andrii Krupka

4,3163 gold badges22 silver badges41 bronze badges

answered Feb 16, 2016 at 16:26

DDK

712 silver badges9 bronze badges

2 Comments

GoldBishop Over a year ago

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.

DDK Over a year ago

@GoldBishop yea that's why better to choose the second option

Collectives™ on Stack Overflow

jQuery Click event on asp:button

13 Answers 13

Comments

Comments

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

Comments

Comments

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related