ASP.NET Button causes a postback

Question

I have an asp.net button on the page. I am trying to do this:

    $("#btn").click(function(e) {
        e.preventDefault();
        alert('hi');
    }

But the alert never shows up. I have to use an ASP.NET button only and not a HTML one.

Answer 1

Make sure you reference the ClientID of the button, not the "normal" ID.

$("#<%= MyControl.ClientID %>").click(function() {
   alert(...);
   return false;
}

Also make sure this is inside a document.ready() handler:

$(document).ready(function() {
    $("#<%= MyControl.ClientID %>").click(function() {
       alert(...);
       return false;
    }
});

Answer 2

Try to have the method return false as well and in your buttons onclick you add the javascript. Like this:

$("#btn").click(function(e) {
    e.preventDefault();
    alert('hi');
    return false;
}

or add it as an onclientclick function like this:

 function ClickFunction() {
     alert('hi');
     return false;
 }

 <asp:Button OnClientClick="return Clickfunction();" />

Answer 3

Ok I got the answer over here

Using jQuery to Prevent ASP.NET Server Side Events from Occuring

I was missing the $(document).ready(function() . So silly of me!