1

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>
4

3 に答える 3

2

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!");
});
于 2012-08-29T05:42:05.093 に答える
1

Asp.net generates a javascript ClientID for all controls.

You should use the ClientID for all javascript references to the control.

<script type="text/javascript">

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

</script>
于 2012-08-29T05:44:43.943 に答える
1

The click event is not firing because you give bad jQuery selector.

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

Will render in html something like this:

<input type="submit" name="ctl00$MainContent$Button1" value="Buttom" onclick="..." id="ctl00_MainContent_Button1" class="button" />

And you got bad selector in jquery:

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

But it should be like this:

$(document).ready(function () {
    //Css Class
    $(".button").click(function () {
            alert("Hello world!");
        });
    });
});

or like this:

$(document).ready(function () {
    //input where id contains 'Button1'
    $("input[id~='Button1']").click(function () {
            alert("Hello world!");
        });
    });
});
于 2012-08-29T05:49:18.897 に答える