我使用以下代码切换主导航:
$(document).ready(function () {
var body, click_event, content, nav, nav_toggler;
nav_toggler = $("header .toggle-nav");
nav = $("#main-nav");
content = $("#content");
body = $("body");
click_event = (jQuery.support.touch ? "tap" : "click");
$("#main-nav .dropdown-collapse").on(click_event, function (e) {
var link, list;
e.preventDefault();
link = $(this);
list = link.parent().find("> ul");
if (list.is(":visible")) {
if (body.hasClass("main-nav-closed") && link.parents("li").length === 1) {
false;
} else {
link.removeClass("in");
list.slideUp(300, function () {
return $(this).removeClass("in");
});
}
} else {
if (list.parents("ul.nav.nav-stacked").length === 1) {
$(document).trigger("nav-open");
}
link.addClass("in");
list.slideDown(300, function () {
return $(this).addClass("in");
});
}
return false;
});
if (jQuery.support.touch) {
nav.on("swiperight", function (e) {
return $(document).trigger("nav-open");
});
nav.on("swipeleft", function (e) {
return $(document).trigger("nav-close");
});
}
nav_toggler.on(click_event, function () {
if (nav_open()) {
$(document).trigger("nav-close");
} else {
$(document).trigger("nav-open");
}
return false;
});
$(document).bind("nav-close", function (event, params) {
var nav_open;
body.removeClass("main-nav-opened").addClass("main-nav-closed");
return nav_open = false;
});
return $(document).bind("nav-open", function (event, params) {
var nav_open;
body.addClass("main-nav-opened").removeClass("main-nav-closed");
return nav_open = true;
});
});
this.nav_open = function () {
return $("body").hasClass("main-nav-opened") || $("#main-nav").width() > 50;
};
但在asp.net中发生异步回发后此代码无法正常工作。请帮助我知道为什么会发生这种情况,以及如何在回发后将此代码更改为切换菜单。
这是切换前的菜单:
这是切换后的菜单:
这是我的asp.net代码:
<nav id='main-nav'>
<asp:UpdatePanel runat="server" ID="upExpander">
<ContentTemplate>
<asp:HiddenField ID="hfMenu" runat="server" Value="1" />
<div class='navigation'>
<ul class='nav nav-stacked'>
<li>
<a href="#" class="dropdown-collapse">
<i class="icon-gears"></i>
<span><%=Resources.Titles.ProjectList %></span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class='nav nav-stacked'>
<asp:HiddenField runat="server" ID="hfFolderID" />
<asp:ListView ID="lvProjects" runat="server" DataSourceID="odsProject" DataKeyNames="ID" OnItemDataBound="lvProjects_ItemDataBound">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnProject" runat="server" OnClick="lbtnProject_Click" data-expand="collapse">
<i class='icon-gears'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<ul class='nav nav-stacked'>
<asp:ListView ID="lvFolder" runat="server" DataKeyNames="ID" OnItemDataBound="lvFolder_ItemDataBound">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnFolder" runat="server" OnClick="lbtnFolder_Click">
<i class='icon-folder'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<asp:LinkButton ID="lbtnAddDocument" runat="server" CssClass="addDocument" OnClientClick="ShowModalBox('modal_AddDocument');" OnClick="lbtnAddDocument_Click">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="<%=Resources.Titles.AddDocument %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
<asp:LinkButton ID="lbtnAddFolder" runat="server" CssClass="addFolder" OnClientClick="ShowModalBox('AddFolderModal');" OnClick="lbtnAddFolder_Click">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="<%=Resources.Titles.AddFolder %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="odsProject" runat="server" TypeName="DMS.Data.ProjectProvider" SelectMethod="GetUserProjects" OnSelecting="odsProject_Selecting">
<SelectParameters>
<asp:Parameter Name="userID" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</ul>
</li>
<%--<li>
<a href="#" class="dropdown-collapse">
<i class="icon-gears"></i>
<span><%=Resources.Titles.MyFolders %></span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class='nav nav-stacked'>
<asp:HiddenField runat="server" ID="hfMyFolderID" />
<asp:ListView ID="lvMyFolders" runat="server" DataSourceID="odsMyFolders" DataKeyNames="ID" OnItemDataBound="">
<ItemTemplate>
<li>
<asp:LinkButton ID="lbtnMyFolder" runat="server" OnClick="">
<i class='icon-gears'></i>
<span><%#System.Convert.ToString(Eval("Name").ToString().Length<30 ? Eval("Name") : Eval("Name").ToString().Substring(0,30) + "..." ) %></span>
</asp:LinkButton>
<ul class='nav nav-stacked'>
<asp:Literal runat="server" ID="litSubfolders"/>
</ul>
<asp:LinkButton ID="lbtnAddFolder" runat="server" CssClass="addFolder" OnClientClick="ShowModalBox('AddFolderModal');" OnClick="lbtnAddFolder_Click">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="<%=Resources.Titles.AddFolder %>"></i>
</asp:LinkButton>
</li>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="odsMyFolders" runat="server" TypeName="DMS.Data.VirtualFolderProvider" SelectMethod="GetUserFolders" OnSelecting="">
<SelectParameters>
<asp:Parameter Name="userID" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</ul>
</li>--%>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
这是生成的html代码:
<nav id="main-nav">
<div id="ucExpander_upExpander">
<input type="hidden" name="ctl00$ucExpander$hfMenu" id="ucExpander_hfMenu" value="ucExpander_lvProjects_lbtnProject_0">
<div class="navigation">
<ul class="nav nav-stacked">
<li>
<a href="#" class="dropdown-collapse in">
<i class="icon-gears"></i>
<span>لیست پروژه ها</span>
<i class="icon-angle-down angle-down"></i>
</a>
<ul class="nav nav-stacked in" style="display: block;">
<input type="hidden" name="ctl00$ucExpander$hfFolderID" id="ucExpander_hfFolderID">
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_0" class="dropdown-collapse" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت اسناد</span>
<i class="icon-angle-down angle-down"></i></a>
<ul class="nav nav-stacked" style="display: none;">
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_0" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl0$lbtnFolder','')">
<i class="icon-folder"></i>
<span>aa</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_0" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl0$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_1" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl1$lbtnFolder','')">
<i class="icon-folder"></i>
<span>bb</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_1" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl1$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_2" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl2$lbtnFolder','')">
<i class="icon-folder"></i>
<span>cc</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_2" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl2$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_3" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl3$lbtnFolder','')">
<i class="icon-folder"></i>
<span>dd</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_3" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl3$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_0_lbtnFolder_4" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl4$lbtnFolder','')">
<i class="icon-folder"></i>
<span>ee</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_0_lbtnAddDocument_4" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lvFolder$ctrl4$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
</ul>
<a onclick="ShowModalBox('AddFolderModal');" id="ucExpander_lvProjects_lbtnAddFolder_0" class="addFolder" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl0$lbtnAddFolder','')">
<i class="icon icomoon-icon-AddFolder hasTooltip" title="" data-original-title="ایجاد فولدر"></i>
</a>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_1" class="dropdown-collapse" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت و درج روزانه کار...</span>
<i class="icon-angle-down angle-down"></i></a>
<ul class="nav nav-stacked">
<li>
<a id="ucExpander_lvProjects_lvFolder_1_lbtnFolder_0" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl0$lbtnFolder','')">
<i class="icon-folder"></i>
<span>bbb</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_1_lbtnAddDocument_0" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl0$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
<li>
<a id="ucExpander_lvProjects_lvFolder_1_lbtnFolder_1" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl1$lbtnFolder','')">
<i class="icon-folder"></i>
<span>ff</span>
</a>
<a onclick="ShowModalBox('modal_AddDocument');" id="ucExpander_lvProjects_lvFolder_1_lbtnAddDocument_1" class="addDocument" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl1$lvFolder$ctrl1$lbtnAddDocument','')">
<i class="icon icomoon-icon-AddDocument hasTooltip" title="" data-original-title="درج سند جدید"></i>
</a>
</li>
</ul>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_2" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl2$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مدیریت هوشمند ماموریت</span>
</a>
<ul class="nav nav-stacked">
</ul>
</li>
<li>
<a onclick="updateExpandData(this, 'ucExpander_hfMenu');" id="ucExpander_lvProjects_lbtnProject_3" data-expand="collapse" href="javascript:__doPostBack('ctl00$ucExpander$lvProjects$ctrl3$lbtnProject','')">
<i class="icon-gears"></i>
<span>سامانه مهر بندرعباس</span>
</a>
<ul class="nav nav-stacked">
</ul>
</li>
</ul>
</li>
</ul>
</div>
请帮我解决这个问题。谢谢
答案 0 :(得分:1)
您没有告诉异步回发的作用,但由于您显示的代码中没有ASP.NET控件,我认为它都在控件内。
这意味着异步调用将代码的新版本替换为代码,因此绑定到元素的任何事件都将消失,因为这些元素不再存在。
您可以使用委托事件将事件绑定到由异步调用替换的元素之外。这会将它绑定到body
元素,但如果可能,您应该使用更接近目标元素的元素:
$("body").on(click_event, "#main-nav .dropdown-collapse", function (e) {
答案 1 :(得分:0)
您可以使用此脚本
<script type="text/javascript">
// if you use jQuery, you can load them when dom is read.
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Place here the first init of the DatePicker
jValid();
});
function InitializeRequest(sender, args) {
// make unbind to avoid memory leaks.
jValid();
}
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
jValid();
}
function jValid()
{
//your code here
}
});
}
</script>