Question

我正在尝试通过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();
});

这是我能找到的best documentation of the api。

jScrollPane和AJAX

1 个答案: