Question

I could not find out, I created a new web project and wrote the simplest jquery code but it doesn’t work, what can be the reason why below button does not alert “Hello World”?

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#Button1").click(function () {
                alert("Hello world!");
            });
        });

    </script>

<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Content>

Answer 1

Because you have a masterpage on the aspx page. The id of button1 will get changed while render on web browser. so element with id attribute “Button1” will not exists.

so if you want to work with button’s new render id you should check that from browser and place that id instead of Button1, or you can try this, without knowing generated id.

$(document).ready(function () {
      $("#Button1").click(function () {
          alert("Hello world!");
      });
});

to

$(document).ready(function () {
      $("[id$=Button1]").click(function () {
          alert("Hello world!");
      });
});

Selector [id$=Button1], search, an element, which id ends with word “Button1”.

or you can get the generated id, by Button1 server control’s ClientID Property.
To use this you should change your function to, as @nunespascal suggest in his answer.

$("#<%= Button1.ClientID %>").click(function () {
      alert("Hello world!");
});