Потеря эффекта mCustomScrollbar при выполнении вызова ajax

Question

Я использую mCustomScrollbar, чтобы заменить полосы прокрутки по умолчанию в теге div, содержащие таблицу, которую я рисую с помощью javascript, чтобы помочь мне перезагрузить ее при выполнении вызовов ajax, вот мой код HTML:

<!-- the div that will contain the table--> 
<div id="countriesTable" class="customScroll" data-mcs-theme="dark"> 
</div> 

Вот код функции, которая загружает данные в таблице и втягивает его внутрь DIV

function reloadTable(data, id) { 
     var str = '<table class="table"><thead>' +      
       '<tr><th> Column1 </th>' + 
       '<th> Column2 </th>' + 
       '<th> Column3 </th>' + 
       '<th> Column4 </th></tr></thead><tbody>'; 
     for (var property in data) { 
      if (data.hasOwnProperty(property)) {      
       str += '<tr>' 
       str += '<td>' + data[property][0] + '</td>' + 
       '<td>' + data[property][1] + '</td>' + 
       '<td>' + data[property][2] + '</td>' + 
       '<td>' + data[property][3] + '</td></tr>'; 
      } 
     } 
     str += '</tbody></table>'; 
     $(id).html(str); 
    } 

и, конечно же, вызов функции для загрузки данных, а также функции, которая применяется пользовательский эффект полосы прокрутки:

reloadTable(myData, '#countriesTable'); 
$(".customScroll").mCustomScrollbar(); 

При загрузке страницы в DIV получает пользовательский скроллбар успешно, но когда я perfom в Ajax вызов перезагружать данные в моей таблице, и я рисую его еще раз, используя функцию reloadTable я теряю эффект прокрутки. Я попытался вспомнить mCustomScrollbar внутри функции успеха ajax, но напрасно.

Answer 1

Я думаю, что вам нужно удалить текущий mCustomScrollbar так:

$('.customScroll').mCustomScrollbar("destroy") 
$('#countriesTable').html("") 
reloadTable(myData, '#countriesTable'); 
$(".customScroll").mCustomScrollbar();