私からjqueryのカスタムスクロールバーのプラグインを使用しています

Question

javascriptのイベントを組み合わせ

<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}); 
});