jScrollPane和AJAX

我正在尝试通过AJAX调用将一些数据加载到PHP脚本然后返回它，bla bla bla。 好吧，它一切正常，直到jScrollPane不会在AJAX调用上重新加载。 我只是不明白为什么，因为我在$ .ajax电话的成功部分中称它为…但是哦，好吧，不知道。 看看下面的代码，告诉我我做错了什么/如何解决它。

function eventLink(){ jQuery(".ticket-link a").fancybox({ width:710, height:750, type:"iframe", transitionIn:"elastic", transitionOut:"elastic", speedIn:600, speedOut:600, easingIn:"easeInExpo", easingOut:"easeOutExpo", overlayShow:true, hideOnOverlayClick:false, hideOnContentClick:false, overlayOpacity:0.8, overlayColor:"#000", showCloseButton:true, titleShow:true, centerOnScroll:true }); } function scrollPane() { jQuery('.scroll-pane').jScrollPane({ showArrows: true, autoReinitialise: true }); } jQuery(document).ready(function(){ jQuery("select[name='sortby']").change(function(){ var a=jQuery(this).val(); jQuery.ajax({ type:"GET", url:"ticket_order.php", data:"sortby="+a, beforeSend:function(){ jQuery("#ajax-loader").show(); jQuery("#ticket-list").hide(200); jQuery("#ticket-list").empty()}, complete:function(){ jQuery("#ajax-loader").hide(); eventLink(); }, success:function(a){ jQuery("#ticket-list").html(a); jQuery("#ticket-list").show(200); scrollPane(); } }); return false}); eventLink(); scrollPane(); }); 

Answer 1

我用jScrollPane遇到了这个问题。 一旦它围绕元素创建滚动窗格结构，您需要以不同方式对待它。 它在您的函数中重新初始化时反应不佳。 相反，您必须通过公开的方法获得对api的引用并重新初始化。

使用您的代码的一个例子是……

 // initialise the scrollpanes $(document).ready(function() { jQuery('.scroll-pane').jScrollPane({ showArrows: true, autoReinitialise: false }); }) 

然后你的jScrollpane需要两件事。 这是内容容器和重新初始化方法。 原因似乎是一旦用jScrollPane（）初始化容器，容器本身就变成了一个jScrollpane对象。 内容将移动到该对象中的容器。 因此，如果替换目标div的内容，则将删除构成jScrollPane对象的html元素。 以下是调用内容窗格，填充数据并重新初始化的调用。

api.getContentPane（）将为您提供对滚动窗格的业务端的引用，api.reinitialise（）将重绘并重新计算滚动窗格。 所以要用你的例子，

  jQuery("#ticket-list").html(a); jQuery("#ticket-list").show(200); 

会成为：

  api = jQuery("#ticket-list").data('jsp'); api.getContentPane().html(a); jQuery("#ticket-list").show(200); api.reinitialise(); 

这个

  $(document).ready(function() { // initialise the scrollpanes jQuery('.scroll-pane').jScrollPane({ showArrows: true, autoReinitialise: false }); }) jQuery("select[name='sortby']").change(function(){ var a=jQuery(this).val(); jQuery.ajax({ type:"GET", url:"ticket_order.php", data:"sortby="+a, beforeSend:function(){ jQuery("#ajax-loader").show(); jQuery("#ticket-list").hide(200); jQuery("#ticket-list").empty()}, complete:function(){ jQuery("#ajax-loader").hide(); eventLink(); }, success:function(a){ api = jQuery("#ticket-list").data('jsp'); api.getContentPane().html(a); jQuery("#ticket-list").show(200); api.reinitialise(); } }); return false}); eventLink(); }); 

这是我能找到的最好的api文档 。