insertAdjacentHTMLを使用して動的にロードされたコンテンツで、スクロールバーが正しく機能しない

Question

div内のリストとして配列（JSONエンコードされた値）からリンクを動的にロードしようとしています。私の実際のアプリケーションでは、この配列はPHPから来ています。
私はinsertAdjacentHTML('beforeend', "link content")を使用してコンテンツを設定しています。

「アコーディオンスライダー」と「パーフェクトスクロールバー」を使用して同じスタイルを設定するには、両方をうまく組み合わせることができました。私はdivの中に望むようにリンクを表示することができますが、スクロールバーは今や消えているようです。

ここでフィドルを確認してください - https://jsfiddle.net/prashu421/2mpL61x7/
を使用すると、動的にロードされていないリンクをチェック希望の場合は、スクロール可能で、スクロールバーがそこに表示されます。

私の場合、インターネット上で明確な参照が見つかりませんでした。

ご協力いただきまして誠にありがとうございます。
ありがとうございます。

Answer 1

動的HTMLをloadイベントに含めますが、動的htmlロードの前にトリガーされるjQueryの$（document）.ready（）関数でスクロールバーを初期化します。

だから、このfiddle- https://jsfiddle.net/kumar4215/svhscqcp/

<div id="bloc-accordeon"> 
    <ul class="accordion"> 
    <li id="one" class="files"> 
     <a href="#one">One</a> 
     <ul class="sub-menu" id="firstClub" style="font-size: 12px;"> 
     <!--Container for dynamically generated links--> 
     </ul> 
    </li> 
    <li id="two" class="mail"> 
     <a href="#two">Two</a> 
     <ul class="sub-menu"> 
     </ul> 
    </li> 
    <li id="three" class="cloud"> 
     <a href="#two">Three</a> 
     <ul class="sub-menu"> 
     </ul> 
    </li> 
    </ul> 
</div>