jQuery tiny scrollbar with dynamic html

Question

I have created a tree structure using jQuery and web services. I create child nodes of tree by dynamic html which I create on the fly as and when needed. This tree works fine for me.

Now my second task is to have a custom scroller in it(something like what facebook/gmail have). I used JQuery Tiny Scrollbar plugin for this and it worked fine at first step but it fails to cope up with dynamically added html.

My tree is something like below:

- Asia
   India
   China
+ Europe
+ South America

Html for above is something like below:

<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 for countries under Europe and South America is created on the fly when user clicks on '+' icon

Now issue comes with this dynamically created HTML, as this tiny scrollbar plugin fails to handle this dynamic HTML. It simply ignores this HTML. Please suggest any pointers to rectify this.

Thanks, Ravi Gupta

Answer 1

I think that all you have to do is call the update function of the scrollbar plugin after the content has been loaded:

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

oScrollbar5.tinyscrollbar_update();

That example is from the home page of the plugin: http://baijs.nl/tinyscrollbar/

You would call this (or similar) code after your dynamic content changes.

Answer 2

Since the elements don't exist at first, they cannot be bound to via traditional document.ready binding. What you'll want to do is use the .on() method ( http://api.jquery.com/on/ ) to bind to the container and specify an element to execute the attached function on. For example:

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

That way, any new LI elements created after DOM ready will still be bound to the click handling function that you've created.