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?

Answer 1

1. Check if the id attribute is in the html source when you run the site.
   
2. 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.

Answer 2

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>

Answer 3

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

Answer 4

Hello, 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.

Answer 5

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']")