1

我找不到，我创建了一个新的 web 项目并编写了最简单的 jquery 代码，但它不起作用，下面的按钮没有提示“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

因为您在 aspx 页面上有一个母版页。在 Web 浏览器上渲染时 button1 的 id 将被更改。因此具有 id 属性“Button1”的元素将不存在。

因此，如果您想使用按钮的新渲染 ID，您应该从浏览器中检查并放置该 ID 而不是 Button1，或者您可以在不知道生成的 ID 的情况下尝试此操作。

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

至

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

Selector [id$=Button1]，搜索，一个元素，它的 id 以单词“Button1”结尾。

或者您可以通过 Button1 服务器控件的 ClientID 属性获取生成的 id。要使用它，您应该将您的功能更改为，正如@nunespascal 在他的回答中所建议的那样。

$("#<%= Button1.ClientID %>").click(function () {
      alert("Hello world!");
});
于 2012-08-29T05:42:05.093 回答
1

Asp.net 为所有控件生成一个 javascript ClientID。

您应该对控件的所有 javascript 引用使用 ClientID。

<script type="text/javascript">

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

</script>
于 2012-08-29T05:44:43.943 回答
1

click 事件没有触发，因为您提供了错误的 jQuery 选择器。

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

将在 html 中呈现如下内容：

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

你在 jquery 中有错误的选择器：

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

但它应该是这样的：

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

或像这样：

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