Question

我在C＃中有以下内容：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <span id="header" class="hideMe">
            (other irrelevant tags and controls)
        </span>
        <div>
            (other irrelevant tags and controls)
        </div>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
    </Triggers>
</asp:UpdatePanel>

以下jQuery

if ($) {
  $(document).ready(function () {

    $('#header').click(function ($e) {
      if ($(this).hasClass('hideMe')) {
        $('#header').removeClass('hideMe');
        $('#header').addClass('showMe');
      }
      else {
        $('#header').removeClass('showMe');
        $('#header').addClass('hideMe');
      }
    }

  });
}

jQuery工作正常（即 - 如果我点击标题范围并且hideMe类是最新的那么它将删除hideMe并添加showMe，反之亦然）。

但是，当我点击btnSubmit然后发生异步回发并导致标题范围重置为其原始状态（应用hideMe类）。

如何让标题范围保持在单击提交按钮时的状态，并且不会恢复到页面加载时的状态？

Answer 1

对我有用的是什么：

$(document).ready(function() { 
    // bind your jQuery events here initially 
}); 

var prm = Sys.WebForms.PageRequestManager.getInstance(); 

prm.add_endRequest(function() { 
    // re-bind your jQuery events here 
});

取自：jQuery $(document).ready and UpdatePanels?

Answer 2

尝试使用一些事件委派。

if ($) {
  $(document).ready(function () {

    $('body').delegate('#header','click',function ($e) {
      if ($(this).hasClass('hideMe')) {
        $(this).removeClass('hideMe');
        $(this).addClass('showMe');
      }
      else {
        $(this).removeClass('showMe');
        $(this).addClass('hideMe');
      }
    }

  });
}

编辑：如评论中所述，这不会维持状态。为简单起见，我建议为此目的使用全局变量，但是您需要在异步调用上运行某种回调，以根据以前的状态根据需要应用类。

ASP.NET AJAX异步回发后jQuery CSS更改丢失

2 个答案: