jquery scrollpane ms ajax updatepanel在回发后不起作用

我收到了一个网站的新设计，在设计中设计师使用了jquery。 我正在将设计实现为ASP.NET Ajax应用程序。

但我遇到了一个问题。 我有一个包含更新面板和菜单的页面。 单击菜单项时，会将用户控件动态加载到更新面板上的占位符中。 这使得页面没有完全刷新，只有更新面板。

现在，用户控件中的内容包含一个延伸到窗口最大高度的滚动窗格。 第一次运行正常，但是当单击菜单项并加载新的用户控件时，其内容包含相同的滚动窗格。 高度不会延伸到窗口的最大高度，然后只使用它所需的高度。 当我不包含jquery文件时会发生同样的事情，所以它必须对jscript库做一些事情。

页面中使用的脚本：

scripts/jquery.js jquery.watermark.js scripts/jquery.customSelect.js scripts/jquery.easing.js scripts/jquery.logger.js scripts/jquery.sizes.min.js scripts/jquery.mousewheel.js scripts/jquery.em.js scripts/jquery.core.js scripts/jquery.accordion.js scripts/jquery.tabs.js scripts/jquery.scroll.js scripts/jquery.datepick.js scripts/jquery.datepick-nl.js scripts/jquery.scripts.js 

加载主页面的主页代码：

用户控件的主要代码：

 
 
 
 
 
<asp:Label ID="lblNoAccount" runat="server" Text="">
 
<asp:Label ID="lblMainText" runat="server" Text=""> <asp:LinkButton ID="lbAccountAanvragen" runat="server" Text="" onclick="lbAccountAanvragen_Click">.
 
  

CSS代码：

  #content { background: url(../images/contentBg.png) repeat-y left top; position: relative; top: 58px; margin: 0px 0px 0px 11px !important; width: 886px; padding: 20px 20px 10px 20px; } #contentVlak { width: 676px; height:100%; padding: 0px 20px; } #contentVlak p { line-height: 20px; margin-bottom: 10px; font-size: 11.5px; } #contentVlak a { font-weight: bold; text-decoration: none; } #contentVlak a:hover { text-decoration: underline; } /* Scrollpane styles */ .scroll_pane { overflow: auto; } .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrack.png) repeat-y left top; } .jScrollPaneDrag { position: absolute; background: #666; cursor: pointer; overflow: hidden; height: 20px !important; width: 20px; background: url(../images/scrollPane.png) no-repeat left top; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background: url(../images/scrollUp.png) no-repeat left top; height: 16px; width: 16px; } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background: url(../images/scrollDown.png) no-repeat left top; height: 16px; width: 16px; } 

我究竟做错了什么？

调整块大小的代码：

 function resizeBlock(object) { var windowHeight = $(window).height(); var start = object.offset().top; var margin = object.margin().bottom + object.margin().top; var padding = object.padding().bottom + object.padding().top; var totalHeight = windowHeight - start - padding - 9; object.height(totalHeight); // Hoogtes van scroll-ding fixen object.find(".scroll_pane").height(totalHeight); object.find(".jScrollPaneContainer").height(totalHeight); object.find(".jScrollPaneTrack").height(totalHeight); object.find(".jScrollPaneDrag").height(totalHeight - 32); // Object opnieuw toevoegen $(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 }); } $(document).ready(function () { // Functie zie hierboven resizeBlock($("#content")); $(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 }); $(window).resize(function() { resizeBlock($("#content")); }); // Custom selectboxes if($(".default-usage-select").length > 0) { $(".default-usage-select").selectbox(); } // Watermarks op homepage if($("#relatiecode").length > 0) { $("#relatiecode").Watermark("relatiecode", "#808285"); } if($("#wachtwoord").length > 0) { $("#wachtwoord").Watermark("wachtwoord", "#808285"); } // Accordion box if($(".accordion").length > 0) { $('.accordion').accordion({ header: '.accordionTrigger', autoheight: true, animate: '100' }); if($(".accordionTrigger").hasClass("selected")) { $("#accordionLastTrigger").addClass ("activeLastTrigger"); } } // Tabbladen if($("#tabContainer").length > 0) { $('#tabContainer > ul').tabs(); } // IE 6 Hover fix voor menu's if (jQuery.browser.msie) { if(parseInt(jQuery.browser.version) == 6) { $('ul li').hover(function() { $(this).addClass('ie6hover'); }, function() { $(this).removeClass('ie6hover'); }); } } });if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); 

Answer 1

这是因为控件基本上被重新绘制到浏览器，并且您为滚动窗格初始化的jQuery未通过重新绘制进行初始化。

您可以使用javascript函数，它允许您重新初始化jQuery代码。 我将抓住一个简单的例子，确保你的页面上有ScriptManager（你应该自更新面板……）……

Answer 2

感谢RSolberg，您的解决方案为我工作..我正在使用JScrollpane用于Apple设备..它适用于更新面板。 这是我更新的代码：

  if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) { $('#<%=iWrapper1.clientID%>').jScrollPane(); $('#<%=iWrapper2.clientID%>').jScrollPane(); $('.videoDisplay').jScrollPane(); } if (navigator.userAgent.indexOf("MSIE") != -1) window.attachEvent("onload", pageLoad) else window.addEventListener("load", pageLoad, false); function pageLoad() { if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); } } function endRequestHandler(sender, args) { if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) { $('#<%=iWrapper1.clientID%>').jScrollPane(); $('#<%=iWrapper2.clientID%>').jScrollPane(); $('.videoDisplay').jScrollPane(); } }