完美的滚动条无法使用 insertAdjacentHTML 动态加载内容答案

【问题标题】：Perfect scrollbar not functional with content loaded dynamically using insertAdjacentHTML完美的滚动条无法使用 insertAdjacentHTML 动态加载内容
【发布时间】：2018-05-04 04:47:58
【问题描述】：

我正在尝试从数组（JSON 编码值）动态加载一些链接作为 div 内的列表。在我的实际应用程序中，这个数组来自 PHP。
我使用 insertAdjacentHTML('beforeend', "link content") 来设置内容。

为了风格相同，我使用“手风琴滑块”和“完美滚动条”，我已经成功地将两者结合起来。我可以在 div 中显示我想要的链接，但现在滚动条似乎消失了。

请在这里检查小提琴 - https://jsfiddle.net/prashu421/2mpL61x7/
如果您要检查未动态加载的链接是否可滚动并且滚动条显示在那里。

我在互联网上找不到任何明确的参考资料。

非常感谢任何帮助。
感谢您的考虑。

【问题讨论】：

所以你没有在你的代码中找到滚动条？因为在示例中我可以看到滚动条。
如果您要检查小提琴，“One”内的菜单，您可以滚动浏览它，但看不到滚动条

标签： javascript jquery perfect-scrollbar insertadjacenthtml

【解决方案1】：

您在 load 事件中包含动态 HTML，但在动态 html 加载之前触发的 jQuery 的 $(document).ready() 函数上初始化滚动条。

因此，要解决这个问题，请将所有内容放在同一个函数中，或者只是放在文档的末尾，如本小提琴的代码所示 - 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>

【讨论】：