When I am using ajax to render the Scroller part iScroll doesn't work

Question

I met a strange problem.

If I use "for loop" to render html into scroller part,everything works well.

But when I am using ajax to render my data into scroller part.iScroll doesn't work(can't scroll).

This is my url : http://yuanwang.sinaapp.com/8505/item.html

You can copy my code and try yourself.

Open the item.js and try to run "for loop",you can see everything runs well.

Answer 1

Have you tried setting up your iScroll inside the success function of your .ajax() call? It looks like you're trying various iterations of calling loaded after various timed events but I think you'll find more success if you set it up once all the DOM elements have been added inside your .success() function.

Perhaps something like this:

for ...
    for ...
        $('#thelist').append("<li>"+ co...
    }
}
myScroll = new iScroll('wrapper');

Update:

Or just call your loaded() function once everything has been added.

Full disclosure: I haven't used iScroll ever so there may be a mistake in your implementation that I wouldn't notice. You may have to do something with your myScroll after you have created a new instance of iScroll. I'm not sure.

Let me know if this doesn't address your situation.