jScrollPane和AJAX

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因爲我能找到。