【发布时间】：2015-03-04 21:46:55
【问题描述】：
在我的登录页面上，我想显示一个简单的表格行，上面写着加载。我在 aspx 页面中放置了一个带有 jquery 函数的简单脚本标记，以在单击登录按钮时显示表格行。用户第一次单击登录按钮时一切正常。要显示的登录按钮和表格行位于 UpdatePanel 容器内。
当用户再次单击登录时，无论凭据好坏，表格行都不会显示。
这是我在页面上的代码：
<%@ Page Language="c#" AutoEventWireup="false" StylesheetTheme="Theme1" Codebehind="Default.aspx.cs" Inherits="....Default" %>
<%@ MasterType VirtualPath="~/..." %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css" media="screen">
* {margin:0;padding:0}
html,body{height:100%}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<div style="height: 100%; width: 100%; display: table; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td valign="middle" align="center">
<form id="frmLogin" runat="server" autocomplete="off">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="Panel1" runat="server" Width="371px" BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="upLogin" runat="server" RenderMode="block" UpdateMode="always">
<ContentTemplate>
<table cellpadding="0" width="100%" style="background-color: white" cellspacing="0" border="0">
<tr>
<td colspan="2" align="right" class="reportHeader" style="height: 30px; padding-right: 10px">
<%= this.VersionName %>
</td>
</tr>
<tr>
<td valign="middle" style="height: 140px" class="Yellow">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td colspan="3"><b>Please Log In:</b></td>
</tr>
<tr>
<td>Username:</td>
<td><b><asp:TextBox Width="150" ID="txtUserName" runat="server" AutoCompleteType="Disabled" /></b></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox Width="150" TextMode="password" ID="txtPassword" runat="server" AutoCompleteType="Disabled" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="left" style="height: 30px; background-color: #f2dcac;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="bottom" style="padding-left: 5px">
<a class="menuLink" href="email.aspx">I forgot my password</a></td>
<td align="right" valign="bottom">
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" /></td>
</tr>
</table>
</td>
</tr>
<tr id="trInvalidLoginMessage" visible="false" runat="server">
<td align="center" colspan="2" style="background-color: #f2dcac;">
<font class="pageError">Invalid login. Please try again.</font>
</td>
</tr>
<tr id="trLoading" visible="False" style="display: none; text-align: center">
<td align="center" colspan="2" style="background-color: #f2dcac">
<font class="pageBodyBold"><h3>Loading...</h3></font>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
Sys.Application.add_load(page_load);
function page_load() {
var txt = $get('<%= this.txtUserName.ClientID %>');
txt.focus();
}
$(function () {
if (<%= Page.IsPostBack.ToString().ToLower() %> == false) {
$("#trLoading").css("display", "none");
$("#loading-div").css("display", "none");
}
$("#btnLogin").click(function () {
if ($("#trLoading").css("display") == 'none') {
$("#trLoading").css("display", "inline");
}
else {
$("#trLoading").css("display", "none");
}
});
});
</script>
</body>
</html>
是否可以让 jquery click 事件处理程序在登录按钮上工作？
【问题讨论】：
-
请注意，jQuery 1.4.1 已经非常老了。
-
@Pointy - 是的，我尽量记住这一点。这是一个现有的（较旧的）应用程序。
-
我在您的 html 中没有看到任何
btnLogin元素？ -
@DarkAshelin - 很抱歉。我编辑了帖子以将其添加到那里。
-
您应该删除
btnLogin上的onclick="BtnLoginClick1"。内联onclick事件会干扰 jQuery.click()事件。
标签： javascript c# jquery asp.net