聯合

Question

我使用jQuery的定製滾動條插件從JavaScript事件： http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

，如果我的代碼和依賴關係添加到我的header.php網頁這樣我可以用這個在我的網頁罰款：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script> 

<link rel='stylesheet' href='css/jquery.mCustomScrollbar.css' type='text/css' media='all' /> 



<script> 
(function($){ 
    $(window).load(function(){ 
     $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default 
     $(".results-inner").mCustomScrollbar({theme:"dark-3", mouseWheel: true}); 
    }); 
})(jQuery); 
</script> 

我遇到的這個問題是，我正在使用ajax分頁加載更多的結果（帖子），這個自定義滾動條出現在每個帖子上。

因此，在頁面加載已經運行後不再可用。好消息是，通過我使用這個方法，我們可以設想JS前端事件，這可以專門添加到這種情況中。所以，與其在header.php中運行此，它實際上應該被添加到允許這些「前端事件」是這樣工作的應用程序定義的區域：

jQuery(document).on('js_event_wpv_pagination_completed', function(event, data) { 
    /** 
    * data.view_unique_id (string) The View unique ID hash 
    * data.effect (string) The View AJAX pagination effect 
    * data.speed (integer) The View AJAX pagination speed in miliseconds 
    * data.layout (object) The jQuery object for the View layout wrapper 
    */ 

}); 

我一定要嘗試添加它準確地說，沒有成功。這是我有：

jQuery(document).on('js_event_wpv_pagination_completed', function(event, data) { 
    (function($){ 
     $(window).load(function(){ 
      $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default 
      $(".results-inner").mCustomScrollbar({theme:"dark-3", mouseWheel: true}); 
     }); 
    })(jQuery); 
}); 

有什麼明顯我可能是錯在這裏做什麼？

就像我參考一樣，在這個應用程序中確實有類似的情況，確實工作正確後，ajax分頁和參數搜索結果更新。這代碼：

jQuery(document).ready(function($) { 
    $(document).on('js_event_wpv_pagination_completed', function() { 
     my_custom_js_func(); 
    }); 
    $(document).on('js_event_wpv_parametric_search_results_updated', function() { 
     my_custom_js_func(); 
    }); 
    my_custom_js_func(); 
    function my_custom_js_func(){ 
     $(".card-grid").flip({ 
      trigger: 'manual' 
     }); 
     $(".flip-btn").click(function() { 
      $(this).closest(".card-grid").flip(true); 
     }); 
     $(".unflip-btn").click(function() { 
      $(this).closest(".card-grid").flip(false); 
     }); 
    } 
}); 

有沒有辦法將自定義滾動條腳本適當地組合成我在這裏提供的工作代碼？這些都將始終顯示在一起，因爲它們是「翻轉」以顯示內容有滾動能力的div背面的內容的div。

Answer 1

你的事件處理程序有點太多東西。試試這個：

jQuery(document).on('js_event_wpv_pagination_completed', function(event, data) { 
    $(".results-inner").mCustomScrollbar({theme:"dark-3", mouseWheel: true}); 
});