Question

我正在使用ASP.net开发网站。我有一个页面，用户输入他的简历。因此，我将在1分钟的时间间隔内将详细信息保存到数据库中，就像在电子邮件服务器中一样。（草稿）

所以我有可折叠的面板来分类用户的数据。

以下代码是面板

      <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="uppnlVacancy">
  <div class="panel panel-primary">

            <ContentTemplate>
                <div class="panel-heading">
                    <h1 class="panel-title">Vacancy
              <asp:Literal runat="server" ID="litVacancy"></asp:Literal>
                    </h1>
                    <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>
                </div>
                <div class="panel-body panel-collapse collapse">
                    <div class="row">
                        <div class="col-md-4">
                            <asp:Literal runat="server" Text="Designation"></asp:Literal>
                            <br />
                            <asp:DropDownList ID="ddDesignation" runat="server" Width="100%" CssClass="form-control">
                            </asp:DropDownList>
                        </div>
                        <div class="col-md-4">
                            <asp:Literal runat="server" Text="Specialization"></asp:Literal>
                            <br />
                            <asp:DropDownList ID="ddSpecialization" runat="server" Width="100%" CssClass="form-control">
                            </asp:DropDownList>
                        </div>
                    </div>
                    <br />
                    <asp:Literal runat="server" Text="Expertise / Skills ( Use comma to separate )"></asp:Literal><br />
                    <asp:TextBox runat="server" TextMode="MultiLine" Rows="3" CssClass="form-control" ID="txtSkillSet"></asp:TextBox>
                </div>

    </div>
            </ContentTemplate>
        </asp:UpdatePanel>

我在jquery下面使用了collpi和expand panel

<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $('.panel-heading span.clickable').addClass('panel-collapsed');
        });
    });

    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // expand the panel
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // collapse the panel
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>

所以添加了这样的计时器

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Timer runat="server" Interval="3000" OnTick="Unnamed_Tick"></asp:Timer>
    </ContentTemplate>
</asp:UpdatePanel>

在tick事件中我使用此代码

 protected void Unnamed_Tick(object sender, EventArgs e)
        {
            ShowSummary();
            uppnlVacancy.Update();
        }

所以上面的代码工作正常.litVacancy标签更新按预期。但更新后发生折叠无法正常工作。当我更改数据库中的记录时，标签仍在更新。

所以什么错了？

Answer 1

我对ASP.NET不是很熟悉，但如果你动态改变.panel-heading你可能应该这样做：

$("body").on("click",".panel-heading span.clickable", function (e) {

您可能正在修改该DOM元素，以至于它解除了点击事件的绑定。

在可更新面板内的异步更新事件后，可折叠面板不会展开？

1 个答案: