发生异步回发后jquery无法正常工作

时间:2015-01-10 13:02:01

标签: jquery asp.net asynchronous updatepanel

我使用以下代码切换主导航:

    $(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中发生异步回发后此代码无法正常工作。请帮助我知道为什么会发生这种情况,以及如何在回发后将此代码更改为切换菜单。

这是切换前的菜单: enter image description here

这是切换后的菜单: enter image description here

这是我的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>

请帮我解决这个问题。谢谢

2 个答案:

答案 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>