CODEWITHSUNDEEP
asp.netjquery
Sachin Gaur
Sachin Gaur

Reputation: 13099

jQuery Click event on asp:button

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?

Upvotes: 5

Views: 79956

Answers (13)

Jay 鲍昱彤
Jay 鲍昱彤

Reputation: 2790

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

Upvotes: 0

Ankursonikajen
Ankursonikajen

Reputation: 61

Please try below:

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

Upvotes: 0

user3615318
user3615318

Reputation: 125

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

Upvotes: 0

GeoffD
GeoffD

Reputation: 11

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>

Upvotes: 1

DDK
DDK

Reputation: 71

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

  1. 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");
    });

  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.

Upvotes: -1

Bless Yahu
Bless Yahu

Reputation: 1341

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

Upvotes: 0

Peter
Peter

Reputation: 1

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

Upvotes: 0

Alex Stephens
Alex Stephens

Reputation: 3116

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.

Upvotes: 0

Luis Coell
Luis Coell

Reputation: 126

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

Upvotes: 11

ra170
ra170

Reputation: 3683

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.

Upvotes: 1

&#211;lafur Waage
&#211;lafur Waage

Reputation: 70011

  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.

Upvotes: 5

Russ Cam
Russ Cam

Reputation: 125538

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

Upvotes: 15

John Leidegren
John Leidegren

Reputation: 61057

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>

Upvotes: 1

Related Questions