UpdatePanel內jquery easyui效果失效的問題

使用updatepanel的好處自然是頁面不刷新，用戶感覺比較好，同時也減少了一部分數據量的傳輸。

使用easyui 的好處除了界面還不錯之外，也因為使用方便。

<div class="easyui-tabs" style="width: 300px"> <div title="搜索"> ...</div> <div title="選擇">...</div> <div title="返回">...</div></div>
只要給他定義個相應的class 就能實現各種效果。

但是，把它放在updatepanel里面，且不是首次就讓他顯示出來的話就出故障了。

例如：

代碼
<asp:MultiView ID="MultiView1" runat="server"> <asp:View ID="View1" runat="server"> <div class="easyui-tabs" style="width: 300px"> <div title="搜索"> ...</div> <div title="選擇"> ...</div> <div title="返回"> ...</div> </div> </asp:View> <asp:View ID="View2" runat="server"> <div class="easyui-tabs" style="width: 300px"> <div title="搜索"> ...</div> <div title="選擇"> ...</div> <div title="返回"> ...</div> </div> </asp:View> </asp:MultiView>
在multipleView里面定義兩個一樣的view，內容也一樣。并把 MultiView1放到updatepanel里面。

然后設置他顯示第一個view

MultiView1.ActiveViewIndex =0;
瀏覽一下。顯示正常。但是當我們改變view的顯示時，例如把上面的改成 MultiView1.ActiveViewIndex =1；那么第二個veiw的效果就全無了。

到jquery.easyui.min.js 里找原因。看到了這么一句

r=$(".easyui-tabs",_1ec);if(r.length){r.tabs();
大概就是在網頁加載完后，尋找class定義為easyui-tabs 的層。并把效果附加給他。

那么可以想象，當頁面加載時，我們顯示的是第一個view，那么js就找到view里的層，并賦予其效果。

然后我們在updatepanel里更新了顯示的view，內容雖然切換到了第二個view了。但是頁面沒有重新加載，上面的js代碼沒有對新的view執行改變。

所以決策就是當updatepanel回發后重新執行js代碼。

在頁面定義一個重新綁定的函數。

function EndRequestHandler() { $(".easyui-tabs").tabs(); }再定義一個事件。 function reload() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); }
add_endRequestPageRequestManager 類是一個管理瀏覽器中服務器 UpdatePanel 控件的部分頁更新。此外，還定義一些屬性、事件和方法，用以通過客戶端腳本對網頁進行自定義。通過調用 getInstance 方法來得到 PageRequestManager 類的實例。然后通過 add_endRequest 方法來綁定 endRequest 事件（異步回發完成，并且控制權返回到瀏覽器之后引發）。這樣以后，每次updatepanel發生回調后，都會觸發EndRequestHandler（）函數。重新綁定一次效果。$(document).ready(function() { reload(); })
失效問題就解決了。

原文：http://www.cnblogs.com/topdog/archive/2010/04/11/1709413.html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈