Question

I have this page, here’s the code..

$(document).ready(function () {

    $('#<%= btnCompare.ClientID %>').click(function() {
        alert("Hey");
       // return false;
    });

});

and the button is,

<asp:Button Text="Compare" ID="btnCompare" runat="server" OnClick="btnCompare_Click" />

but the alert is not showing up?

EDIT :
The generated html

  $(document).ready(function () {
        $('#ctl00_ContentPlaceHolder1_btnCompare').click(function() {
            alert("Hey");
           // return false;
        });
    });

and

<input type="submit" name="ctl00$ContentPlaceHolder1$btnCompare" value="Compare" id="ctl00_ContentPlaceHolder1_btnCompare" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" />

EDIT 2
Could it be because I have a master page for this file, which also has a document.ready handler, so at the page load the both are getting loaded?

Answer 1

This would rather be

 $(document).ready(function () {

$('#<%= btnCompare.ClientID %>').submit(function() {
    alert("Hey");
   // return false;
});

});

EDIT

Replace it

<asp:Button Text="Compare" ID="btnCompare" runat="server" OnClick="btnCompare_Click" />

with

<asp:Button Text="Compare" ID="btnCompare" runat="server" />