执行 ajax 调用时丢失 mCustomScrollbar 效果

Posted 2023-05-09

【中文标题】执行 ajax 调用时丢失 mCustomScrollbar 效果

【英文标题】：Losing mCustomScrollbar effect when performing an ajax call

【发布时间】：2015-12-14 12:52:38

【问题描述】：

我正在使用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 成功获取自定义滚动条，但是当我执行 ajax 调用以将数据重新加载到我的表中时，我再次使用 reloadTable 函数绘制它时，我失去了滚动条效果。 我试图在 ajax 成功函数中调用 mCustomScrollbar，但没有成功。

【参考方案1】：

我认为您需要像这样删除当前的 mCustomScrollbar：

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