Складные панели не расширяются после асинхронного события обновления внутри панели обновления?

Question

Я разрабатываю веб-сайт с использованием ASP.net. У меня есть страница, где пользователь вводит свое резюме. Поэтому я собираюсь сохранить детали в db за 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 для collpse и расширения панелей

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

В случае клеща я используйте этот код

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

Таким образом, над кодом работает fine.lit. Обновление этикетки, как и ожидалось. Но после того, как обновление произошло, сборщик не работает. Ярлык все еще обновляется, когда я меняю запись в БД.

И что не так?

Answer 1

Я не супер знакомы с ASP.NET, но если вы динамически меняется .panel-заголовок вы, вероятно, должны делать это вместо:

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

Вы можете модифицировать, что DOM элемент достаточно того, что он Отвязка щелкните событие.