jScrollPane 和 AJAX

Question

我正在尝试通过 AJAX 调用 PHP 脚本加载一些数据，然后返回它，等等。好吧，它工作得很好，直到 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();

This

  $(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();
});

Here is the api 的最佳文档寻找。