发生异步回发后jquery不起作用答案

【问题标题】：jquery not work after async post back ocuur发生异步回发后jquery不起作用
【发布时间】：2023-05-11 14:22:01
【问题描述】：

我使用下面的代码来切换我的主导航：

    $(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>

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

【问题讨论】：

标签： jquery asp.net asynchronous updatepanel

【解决方案1】：

您不知道异步回发是做什么的，但由于您显示的代码中没有 ASP.NET 控件，我假设它都在控件中。

这意味着代码被异步调用的新版本替换，因此您绑定到元素的任何事件都将消失，因为这些元素不再存在。

您可以使用委托事件将事件绑定到被异步调用替换的元素之外。这会将其绑定到body 元素，但如果可能，您应该使用更接近目标元素的元素：

$("body").on(click_event, "#main-nav .dropdown-collapse", function (e) {

【讨论】：

对不起，我给出了我生成的 html，我有一个 asp.net linkButton 控件作为我的 .dropdown-collapse 项目。异步回发是部分回发，当更新面板内的按钮出现时发生。
@minamorsali：是的，部分回发意味着任何更新面板中标记为更新的所有代码都将被替换。
谢谢Guffa，这段代码解决了我的问题。但我需要的另一件事是我的 .dropdown-collapse 项目是一个链接按钮，它可以在切换后发回并运行 onclick 事件，但现在这不行，我注释掉返回但不会发回，你能帮忙吗我这个？
@minamorsali：如果你的意思是回发应该只在菜单展开时发生，那么你应该只在这种情况下使用preventDefault。使用preventDefault时不需要返回false。
不，当我点击 .dropdown-collapse 时，我需要回发，但 e.preventdefault 并返回 false 会阻止此操作。我该怎么做？

【解决方案2】：

你可以使用这个脚本

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

【讨论】：