Perfect scrollbar not functional with content loaded dynamically using insertAdjacentHTML

Question

I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP.
I am using insertAdjacentHTML('beforeend', "link content") to set the content.

To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.

Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.

I couldn't find any clear reference on the internet for my case.

Any help is greatly appreciated.
Thanks for your consideration.

Answer 1

You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.

So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this 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>