Question

我使用jQuery和Web服务创建了一个树结构。我通过动态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。请提出任何指示以纠正此问题。

谢谢，拉维古普塔

Answer 1

我认为你所要做的就是在加载内容后调用滚动条插件的更新功能：

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

oScrollbar5.tinyscrollbar_update();

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

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

Answer 2

由于元素最初不存在，因此不能通过传统的document.ready绑定绑定它们。你要做的是使用.on（）方法（http://api.jquery.com/on/）绑定到容器并指定一个元素来执行附加的函数。例如：

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

这样，在DOM准备好之后创建的任何新LI元素仍将绑定到您创建的单击处理函数。

带有动态html的jQuery小滚动条

2 个答案: