Using iScroll with JQM and dynamic content

Question

I am trying to implement iScroll into my HMTL5 game using jQuery. I can\'t seem to get it to work? I have followed the guide here: http://www.gajotres.net/using-iscroll-with

Answer 1

iScroll dynamically generates a div which contains scrollable elements, that div has class iscroll-content.

Becomes

So when you use $(".example-wrapper").html("") you remove all contents of the div, instead, you should use $(".example-wrapper .iscroll-content").html("") to clear previous contents/elements.

Also, you need to append new elements to iscroll-content, and then refresh both, listview() and .iscrollview().

$(document).on('pagebeforeshow', '#index', function () {
    $(".example-wrapper .iscroll-content").html("");

    var html = '
';
    for (i = 0; i < 30; i++) {
        html += '
link ' + i + '
';
    }
    html += '
';

    $(".example-wrapper .iscroll-content").append(html);
    $("[data-role=listview]").listview();
    $(".example-wrapper").iscrollview("refresh");
});

Demo