我正在使用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 success 函数中的 mCustomScrollbar 但没有成功。
最佳答案
我认为您需要像这样删除当前的 mCustomScrollbar:
$('.customScroll').mCustomScrollbar("destroy")
$('#countriesTable').html("")
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();
关于javascript - 执行 ajax 调用时丢失 mCustomScrollbar 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32633951/