2012-04-02 41 views
0

我已在在C#以下:ASP.NET AJAX异步回丢失后jQuery的CSS变化

<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类相同)。

如何让标题跨度保持在点击提交按钮时的状态,并且不恢复到页面加载时的状态?

+1

这可以帮助你:http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels/256253#256253 – 2012-04-02 19:14:25

+0

@Gerson - 感谢您的链接!它给了我一个合理的解决方案。 – Jagd 2012-04-03 15:19:31

+0

Gerson - 如果您愿意将该链接作为答案,那么我会将其投票并将其作为答案进行检查。 – Jagd 2012-06-22 17:53:08

回答

5

什么工作对我来说:

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

+0

这是否需要位于脚本内部标记或脚本引用标记或无关紧要?即在中是否引用了

0

尝试使用一些事件代表团。

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'); 
     } 
    } 

    }); 
} 

编辑:正如在评论中指出的,这将不会保持状态。为了简单起见,我建议使用一个全局变量来实现此目的,但是您需要根据以前的状态在异步调用上运行某种回调以根据需要应用这些类。

+1

只能半途而废。事件绑定将被保存(太棒了!),但是被返回的#header不一定有正确的类。可以存储在变量中,在POST之前获取状态并在成功回调中重新应用,POST到服务器并让服务器发回已经呈现正确的类,等等。 – 2012-04-02 19:16:25