母版页中的“更新”面板将停止JQuery

Question

实际问题是我有三个锚点，用于时间和超时以及菜单，当页面加载第一次一切正常但是当我点击时间或超时按钮时，菜单按钮停止工作。没有更新面板所有的东西工作正常，但只有时间进出按钮加载页面只点击我只放置更新面板进出时间以避免页面加载

单面菜单按钮显示菜单项 2次进出按钮分别标记出勤率

 Protected Sub Anchortimein_ServerClick(sender As Object, e As System.EventArgs) Handles Anchortimein.ServerClick

这里的一些代码

    End Sub


 Protected Sub AnchortimeOut_ServerClick(sender As Object, e As System.EventArgs) Handles AnchortimeOut.ServerClick

这里有一些代码         结束子

Public Sub AttendanceValidationMessage(strmsg As String, msg As String)
        Dim strMessage As String = strmsg
        Dim strScript As String = "alert('" & strMessage & " " & msg & "'); "
        If (Not Me.Page.ClientScript.IsStartupScriptRegistered("clientScript")) Then
            ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType, "clientScript", strScript, True)
        End If
    End Sub

// Open/hide menu
		$('#open-menu').on('touchend click', function(event)
		{
			event.preventDefault();

			// Check if valid touch-click event
			if (!$.template.processTouchClick(this, event))
			{
				return;
			}

			// Close shortcuts
			bod.removeClass('shortcuts-open');

			// If in wide screen mode, show/hide side menu, else open/close drop-down menu
			bod.toggleClass($.template.mediaQuery.is('desktop') || $.template.mediaQuery.is('tablet-landscape') ? 'menu-hidden' : 'menu-open');

			// Refresh drop-down menu size if needed
			watchMenuSize();
		});

		// Close drop-down menu
		bod.on('click', function(event)
		{
			// Check if open, and if the click is not on the menu or on the open button
			if (bod.hasClass('menu-open') && !$(event.target).closest('#open-menu, #menu').length)
			{
				bod.removeClass('menu-open');
			}
		});

Css for ul li 
ul.topmainmenu {

position: relative;
width: 99.4%;
height: 38px;
z-index: 9;
margin: 4.5px 0;

}

ul.topmainmenu > li {
float: right;
list-style: none;
}
CSS for Menu 
#open-menu {
	top: 0;
	right: 0;
	padding: 10px 8px 11px;
	}
	#title-bar + #open-menu {
		top: 35px;
	}
	body.reversed #open-menu {
		right: auto;
		left: 0;
	}
	#open-menu > span {
		display: block;
		width: 20px;
		height: 17px;
		border: 0;
		padding: 0;
		overflow: hidden;
		background: url(../img/standard/sprites.png) no-repeat 0 0;
		text-indent: 100px;
		white-space: nowrap;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		}
		body.reversed #open-menu > span {
			background-position: 0 -17px;
		}
		#open-menu:hover > span {
			background-position: -20px 0;
			}
			body.reversed #open-menu:hover > span {
				background-position: -20px -17px;
			}
		body.menu-hidden #open-menu > span {
			background-position: 0 -17px;
			}
			body.menu-hidden.reversed #open-menu > span {
				background-position: 0 0;
			}
			body.menu-hidden #open-menu:hover > span {
				background-position: -20px -17px;
				}
				body.menu-hidden.reversed #open-menu:hover > span {
					background-position: -20px 0;
				}

	/* Menu opener icon */
	#open-menu {
		position: absolute;
		z-index: 4;
		top: 5px;
		right: 8px;
		-webkit-tap-highlight-color: transparent;
		}
		body.reversed #open-menu {
			left: 8px;
			right: auto;
		}
		.fixed-title-bar > #open-menu {
			position: fixed;
		}
		#open-menu > span {
			padding: 0 8px 0 30px;
			background: url(../img/menu.png) no-repeat 7px center;
			font-size: 16px;
			height: 27px;
			line-height: 27px;
		}

		#open-menu > span,
		#open-shortcuts {
			display: block;
			border: 1px solid #020203;
			color: white;
			-webkit-text-shadow: 0 -1px 0 black;
			-moz-text-shadow: 0 -1px 0 black;
			text-shadow: 0 -1px 0 black;
			background-color: #454545;
			background-color: rgba(255, 255, 255, 0.3);
			-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-webkit-background-clip: padding-box;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

CSS for InOut 
.open-menu23 {
		z-index: 4;
		top: 65px;
		right: 43.3%;
     -webkit-tap-highlight-color: transparent;
		
		}
		body.reversed .open-menu23 {
			left: 8px;
			right: auto;
		}
		.fixed-title-bar > .open-menu23 {
			position: static;
		}
		.open-menu23 > span {
			padding: 0 8px 0 30px;
			background: url(../img/inout5.png) no-repeat 7px center;
			font-size: 16px;
			height: 27px;
			line-height: 27px;
		}

		.open-menu23 > span {
			display: block;
			border: 1px solid #020203;
			color: white;
			-webkit-text-shadow: 0 -1px 0 black;
			-moz-text-shadow: 0 -1px 0 black;
			text-shadow: 0 -1px 0 black;
			background-color: #454545;
			background-color: rgba(255, 255, 255, 0.3);
			-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-webkit-background-clip: padding-box;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			width:56px;
			
		}
	.open-menu24 {
		z-index: 6;
		top: 65px;
		right: 50.8%;
     
		-webkit-tap-highlight-color: transparent;
		}
		body.reversed .open-menu24 {
			left: 8px;
			right: auto;
		}
		.fixed-title-bar > .open-menu24 {
			/*position: fixed;*/
			position: static  !important;
		}
		.open-menu24 > span {
			padding: 0 8px 0 30px;
			background: url(../img/inout4.png) no-repeat 7px center;
			font-size: 16px;
			height: 27px;
			line-height: 27px;
		}

		.open-menu24 > span {
			display: block;
			border: 1px solid #020203;
			color: white;
			-webkit-text-shadow: 0 -1px 0 black;
			-moz-text-shadow: 0 -1px 0 black;
			text-shadow: 0 -1px 0 black;
			background-color: #454545;
			background-color: rgba(255, 255, 255, 0.3);
			-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
			-webkit-background-clip: padding-box;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			width:55px;
			
		}

 <asp:UpdatePanel ID="UP" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
	<header role="banner" id="title-bar" style="padding:0px;">    
		<h2></h2>
        <ul class="topmainmenu">
           <li style="margin: 0px -1.2px;"><a href="#" id="open-menu" ><span>Menu</span></a> </li>
           <%If AccountPagePermissionBLL.IsPageHasPermissionOf(15, 1) Then%>
            <li style="margin: 0px -1.2px;"><a href="../AccountAdmin/AdminMain.aspx" id="open-menu4"><span><asp:Label ID="lbladmin" runat="server" ForeColor="White" Font-Size="Smaller" Text="Admin Options" ></asp:Label></span></a>  </li>
        <%End If%>
	   
            <%If Session("Role") = "Administrator" Then%>
            <li style="margin: 0px -1.0px;"><a href="../Employee/EmployeeProfile.aspx" id="open-menu22"><span><asp:Label ID="nametop" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a>    </li>
        <%Else %>
        <%If AccountPagePermissionBLL.IsPageHasPermissionOf(15, 1) Then%>
            <li style="margin: 0px -1.0px;"><a style="right:210px;" href="../Employee/EmployeeProfile.aspx" id="open-menu2"><span><asp:Label ID="nametop2" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a>    </li>
            <%Else%>
            <li style="margin: 0px -1.0px;"><a style="right:90px;" href="../Employee/EmployeeProfile.aspx" id="open-menu21"><span><asp:Label ID="nametop3" runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, LoggedIn As:%>" ></asp:Label></span></a>    </li>
        <%End If%>    
        <%End If%>
       
         <li style="margin: 0px -1.2px;"><a href="#" runat="server" id="AnchortimeOut" class="open-menu23"><span><asp:label ID="lblTimeOut"  runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, Time Out%>" ></asp:label></span></a></li>
         <li style="margin: 0px -1.2px;"><a href="../Employee/Default.aspx" runat="server" id="Anchortimein" class="open-menu24"><span><asp:label ID="lblTimeIn"   runat="server" ForeColor="White" Font-Size="Smaller" Text="<%$ Resources:TimeLive.Web, Time In%>" ></asp:label></span></a></li>
        
        
         </ul>
 	</header>
       </ContentTemplate>
                </asp:UpdatePanel> 

Answer 1

通过将更新面板置于li

中来解决

Answer 2

编写所有代码函数RebindmyStuff并且工作正常，因为updatepanel在任何方法点击后都没有加载jQuery

---

function pageLoad()

 {

 RebindmyStuff();

 }

function RebindmyStuff()

{

  $(document).ready(function() 
 {

   // Open/hide menu

    $('#open-menu').on('touchend click', function(event)

    {
        event.preventDefault();

        // Check if valid touch-click event
        if (!$.template.processTouchClick(this, event))
        {
            return;
        }

        // Close shortcuts
        bod.removeClass('shortcuts-open');

        // If in wide screen mode, show/hide side menu, else open/close drop-down menu
        bod.toggleClass($.template.mediaQuery.is('desktop') || $.template.mediaQuery.is('tablet-landscape') ? 'menu-hidden' : 'menu-open');

        // Refresh drop-down menu size if needed
        watchMenuSize();
    });

    // Close drop-down menu
    bod.on('click', function(event)
    {
        // Check if open, and if the click is not on the menu or on the open button
        if (bod.hasClass('menu-open') && !$(event.target).closest('#open-menu, #menu').length)
        {
            bod.removeClass('menu-open');
        }
        });
});
}

Answer 3

尝试使用事件委派而不是绑定：

$(document).on('touchend click', '#open-menu', function(event) { ... });