Question

我有一些JavaScript经验，但在jQuery方面我是一个完整的菜鸟。基本上我试图添加一个真正简单的点击事件处理程序来返回时间。我没有在控制台中收到任何错误，但是单击按钮时没有任何反应（我添加了console.log纯粹是出于测试目的）。我通过nuget导入了整个bootstrap包，所以我相信我有完整的jQuery库。还有别的东西我不见了吗？提前谢谢！

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="jQuery.aspx.cs" Inherits="garrettPenfieldUnit10.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <h1>jQuery Page</h1>
    <p><asp:Label ID="LabelJQ" runat="server" Text="Click the Button!"></asp:Label></P>
    <asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!"/>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $('#ButtonJQ').click(function () {
            var d = new Date();
            document.getElementById(LabelJQ).innerHTML = d.toLocaleTimeString();
            console.log('wubba lubba dub dub!');
        });
    </script>
</asp:Content>

Answer 1

如果您在浏览器中检查该按钮，我怀疑您发现它没有id="ButtonJQ"，因为服务器控件的ID不是（默认情况下）它的客户端ID。

您至少有三个选择：

将ClientIDMode="Static"添加到其中：
```
<asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" ClientIDMode="Static"/>
```
告诉ASP.Net使用服务器ID作为客户端ID。

使用其他内容（如课程）查找按钮：

<asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" class="update-time"/>

然后在JavaScript中：

$('.update-time').click(function () {
    // ...
});

由于您的JavaScript代码在 ASP文件中，因此您可以使用按钮的ClientID属性：
```
$("#<% ButtonJQ.ClientID %>").click(function() {
    // ...
});
```

请注意，LabelJQ会遇到同样的问题。

Answer 2

首先，您应该检查网络选项卡以确保正在加载jQuery。

但第二件事是你明确地使用Asp.Net并且你正在编写的页面中的控件不是最终的HTML。我建议在任何情况下使用类名而不是ID访问你的元素，因为它更安全 - 特别是因为你可能加载一个由许多开发人员编写的许多元素的页面，id的冲突几率高于它们语义编写的类名。 Asp.Net通过生成包含元素ID中父元素ID的ID来解决这个问题，这就是为什么你没有达到标签的原因。

获取元素本身可以通过在jQuery的$ object中使用CSS访问器来实现，如

$(".date-display-element").html(date);

这将有一个附带的好处（或潜在的缺陷），允许您只需向其中应用一个类，就可以将日期添加到页面中的任何其他元素。

其他一些事情：

您已在所考虑的代码下方的页面中添加了该脚本，因此您无需对任何类型的加载事件执行任何操作
我发现最好将所有裸露的javascript包装在匿名执行的函数中，以便它不会与页面中的任何内容冲突。在你的情况下，代码是相对无害的，但你永远不知道什么时候你可能需要添加一些东西。也就是说，

(function(){ $('#ButtonJQ').click(function () { var d = new Date(); $(".date-display-element").html(d.toLocaleTimeString()); console.log('wubba lubba dub dub!'); }); })();

初学者jQuery问题

2 个答案: