Использование iScroll с JQM и динамическим контентом

Question

Я пытаюсь реализовать iScroll в своей игре HMTL5 с помощью jQuery. Кажется, я не могу заставить его работать? Я последовал за руководство здесь: http://www.gajotres.net/using-iscroll-with-jquery-mobile/

Вот что я пытаюсь сделать:

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

    var html = '<ul data-role="listview">'; 
    for(i = 0; i < 30; i++) { 
     html += '<li><a href="#">link '+i+'</a></li>'; 
    } 
    html += '</ul>'; 
    $(".example-wrapper").append(html); 
    $(".example-wrapper").iscrollview("refresh"); 
}); 

Разница в проекте является то, что он использует триггер, и я использую Append ... Я не могу Кажется, я получаю связь?

Мой пример на jsfiddle здесь: http://jsfiddle.net/jmansa/952NJ/23/

Answer 1

iScroll динамически генерирует DIV, который содержит элементы с прокруткой, что DIV имеет класс iscroll-content.

<div class="example-wrapper" data-iscroll></div> 

Становится

<div class="example-wrapper" data-iscroll> 
    <div class="iscroll-content"></div> 
</div> 

Так что, когда вы используете $(".example-wrapper").html("") удалить все содержимое DIV, вместо этого, вы должны использовать $(".example-wrapper .iscroll-content").html(""), чтобы очистить предыдущее содержимое/элементов.

Кроме того, вам нужно добавить новые элементы в iscroll-content, а затем обновить как, listview() и .iscrollview().

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

    var html = '<ul data-role="listview">'; 
    for (i = 0; i < 30; i++) { 
     html += '<li><a href="#">link ' + i + '</a></li>'; 
    } 
    html += '</ul>'; 

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

Demo