I'm using ASP.NET Ajax with JQuery. I have a click event that adds/removes css classes on objects in an UpdatePanel, but when the ASP.NET Partial postback occurs, I lose the "state." Here is minimal example I tried to create; how do I keep the css class state?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.active { background: #000000; color: #ffffff; }
.test {}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function pageLoad(sender, args) {
// rebind events lost in partial postback
$(".test").unbind();
$(".test").click(function() {
$(".test").removeClass("active");
$(this).addClass("active");
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="30000" ontick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<div class="test">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div class="test">
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>