javascript - jScrollPane 和 AJAX

Question

我正在尝试通过对 PHP 脚本的 AJAX 调用加载一些数据，然后返回它，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 时遇到过这个问题。一旦它围绕一个元素创建了滚动 Pane 结构，您就需要区别对待它。它对像在您的函数中那样重新初始化 react 不佳。相反，您必须获取对 api 的引用并通过公开的方法重新初始化。

使用您的代码的示例是...

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

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

api.getContentPane() 将为您提供对滚动 Pane 业务端的引用，而 api.reinitialise() 将重绘并重新计算滚动 Pane 。所以要使用你的例子，

    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正如我所能找到的。