2012-04-02 43 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