javascript - ajax 呼び出しを実行すると mCustomScrollbar 効果が失われる

Question

mCustomScrollbarを使用して、javascript を使用して描画したテーブルを含む div タグのデフォルトのスクロールバーを置き換えて、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 を思い出そうとしましたが、無駄でした。