I'm rocking this bit of Javascipt in the <head> section of my page:
<script type="text/javascript">
$(document).ready(function() {
$('dl.expander dd').expander
(
{ slicePoint: 50, widow: 2, expandEffect: 'show', userCollapseText: '[^]' }
);
});
</script>
This works great the first time the page is loaded; however, when I click an <asp:button> that is inside an <asp:updatepanel> the page is partially refreshed, but the $(document).ready is never called again.
This is important, because this Javascript in the $(document).ready section is collapsing and adding a "readmore" option to a list of pararaphs (or dl's with class="expander") on the page, most of which should be collapsed by default.
You will need to add a handler to the AJAX client side endRequest event. See the links below for more information. This "event" is called when the ajax engine completes a request to the server, and is necessary for any javascript running on content that is inside the update panel.
http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx
http://msdn.microsoft.com/en-us/library/bb383810.aspx
<script type="text/javascript">
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
// code that you want to run when the request is complete
}
<script>
来源：https://stackoverflow.com/questions/1750368/how-do-i-use-a-jquery-document-ready-and-an-asp-net-updatepanel-together