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

解决方法:

我用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.