带有动态 html 的 jQuery 微型滚动条答案

【问题标题】：jQuery tiny scrollbar with dynamic html带有动态 html 的 jQuery 微型滚动条
【发布时间】：2012-08-21 20:23:32
【问题描述】：

我使用 jQuery 和 Web 服务创建了一个树形结构。我通过动态 html 创建树的子节点，动态 html 在需要时动态创建。这棵树适合我。

现在我的第二个任务是在其中添加一个自定义滚动条（类似于 facebook/gmail 所拥有的）。我为此使用了 JQuery Tiny Scrollbar 插件，它在第一步运行良好，但无法应对动态添加的 html。

我的树如下所示：

- Asia
   India
   China
+ Europe
+ South America

上面的 HTML 如下所示：

<ul>
   <li><span>-</span><span>Asia</span></li>
   <li><span></span><span>India</span></li>
   <li><span></span><span>China</span></li>
   <li><span>+</span><span>Europe</span></li>
   <li><span>+</span><span>South America</span></li>
</ul>

当用户点击“+”图标时，会即时创建欧洲和南美洲国家/地区的 Html

现在这个动态创建的 HTML 出现了问题，因为这个小滚动条插件无法处理这个动态 HTML。它只是忽略了这个 HTML。请提出任何纠正此问题的建议。

谢谢，拉维·古普塔

【问题讨论】：

标签： jquery asp.net dynamic-html tinyscrollbar

【解决方案1】：

我想你只需要在内容加载完毕后调用滚动条插件的更新函数即可：

//some operation that changes the viewport content...

oScrollbar5.tinyscrollbar_update();

该示例来自插件的主页： http://baijs.nl/tinyscrollbar/

您可以在动态内容更改后调用此（或类似）代码。

【讨论】：

【解决方案2】：

由于元素一开始并不存在，因此无法通过传统的 document.ready 绑定对其进行绑定。您要做的是使用 .on() 方法（http://api.jquery.com/on/）绑定到容器并指定一个元素来执行附加的函数。例如：

$('ul').on('click', 'li', function(e){
  $(this).doStuffWithChildLIElement();
});

这样，在 DOM 就绪后创建的任何新 LI 元素仍将绑定到您创建的点击处理函数。

【讨论】：