Question

我无法找到，我创建了一个新的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>

Answer 1

因为您在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!");
      });
});

选择器[id$=Button1]，搜索，一个元素，其id以“Button1”结尾。

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

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

Answer 2

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

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

<script type="text/javascript">

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

</script>

Answer 3

点击事件未触发，因为您提供了错误的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!");
        });
    });
});

点击事件没有解雇（或者我无法看到？）

3 个答案: